如何在 ReactJS imported CSS 中使用环境变量？

Question

我使用 https://github.com/facebookincubator/create-react-app 创建了一个简单的 React 应用程序。

我正在尝试为组件的 CSS 指定可配置的 URL，如下所示：

.Cell {
    background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}

这里是组件：

import React from 'react';
import './Cell.css'

class Cell extends React.Component {
    render() {
        return (
            <div className="Cell">
                {this.props.name}
            </div>
        );
    }
}

但看起来流程变量并没有渗透到导入的 CSS。我该怎么做？

Answer 1

如果您想在 CSS 中使用 js 变量，请尝试使用 React 内联样式而不是普通的 css 文件。

https://facebook.github.io/react/tips/inline-styles.html

如果你想分离 CSS 和 JS，你可能需要一个 CSS 预处理器来管理你的全局变量。

Answer 2

我遇到过一个这样的场景，我使用的方法不是在 CSS 中将其添加为背景，而是制作一个 img 元素并将路径分配为组件本身的 src。我认为没有其他方法可以做到这一点。

如何在 ReactJS imported CSS 中使用环境变量？

How to use environment variables in ReactJS imported CSS?

css

environment-variables

reactjs

create-react-app