在 reactjs 应用程序的 .scss 文件中获取环境变量答案

【问题标题】：Get environment variables in .scss file in reactjs application在 reactjs 应用程序的 .scss 文件中获取环境变量
【发布时间】：2019-04-04 14:33:42
【问题描述】：

我有一个场景，我将通过 CDN 获取背景图像 URL，CDN 的基本路径在环境文件中设置。由于我只能在.js 文件中访问环境变量，而不能在.scss 中访问，因此无法在.scss 中定义样式。我可以使用内联样式，但我想通过媒体查询根据设备大小显示/隐藏背景图像。但我无法在.js 中得到它。

那么，有什么解决办法吗？

【问题讨论】：

标签： css reactjs sass environment-variables media-queries

【解决方案1】：

根据环境变量，您可以在 React 中拥有多个所需的 CSS 文件。一个例子可能是：

if (process.env.NODE_ENV === 'development') {
    require('./dev_only_styles.css');
}

【讨论】：

好主意。所以正如 moigonz 所说，您可以在 js 中使用内联样式显示背景图像，并使用 css 显示从 css 媒体查询中隐藏该图像。