如何在ReactJS中使用环境变量导入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中。我该如何解决这个问题？

- Ben

---

你有这个问题的答案吗？我也在面临同样的问题。 - Ragnar

Answer 1

如果你想在CSS中使用JS变量，建议使用React内联样式而不是纯CSS文件。

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

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

- Jean Y.C. Yang

---

但是，我有一个场景，其中背景图像将根据在.scss中定义的媒体查询设置或取消。在这种情况下，我不能使用内联样式。 - PCK

Answer 2

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

- Rick D Berg

Answer 3

最近遇到了类似的问题，就此发表下评论。这个方法可以用来在构建时将图像文件发送为CSS变量。

• 使用style属性来调用CSS样式
• 将url()值放在模板字面量中
• 使用JavaScript的require()来引用最终构建包中的文件。如果使用相对URL，则需要根据将调用页面的位置而不是组件JS文件的位置来调用图像。

在React组件中，使用行内样式属性来设置CSS变量：

<div 
style={{"--img":`url( ${require("../../images/coding.jpg")})`}}>
</div>

在CSS文件中：

background-image: var(--img);

- sosebee_dev