如何在导入的CSS中使用环境变量?
我使用创建了一个简单的React应用程序 我试图为组件的CSS指定一个可配置的URL,如下所示:如何在导入的CSS中使用环境变量?,css,reactjs,environment-variables,create-react-app,Css,Reactjs,Environment Variables,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() {
.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>
);
}
}
从“React”导入React;
导入“./Cell.css”
类单元格扩展了React.Component{
render(){
返回(
{this.props.name}
);
}
}
但它看起来不像是流程变量滴流到导入的CSS中。我该怎么做呢?如果您想在CSS中使用js变量,请尝试使用React内联样式而不是普通CSS文件
如果你想把CSS和JS分开,你可能需要一个CSS预处理器来管理你的全局变量。我遇到过这样的一个场景,我使用的方法不是在CSS中添加它作为背景,而是在组件本身中创建一个img元素并将路径指定为src。我认为没有任何其他方法可以做到这一点。但是,我有一个场景,根据.scss中定义的媒体查询设置或取消设置背景图像。在这种情况下,我不能使用内联样式