如何在 node-sass .scss 文件中使用环境变量？答案

【问题标题】：How can I use environment variables in node-sass .scss files?如何在 node-sass .scss 文件中使用环境变量？
【发布时间】：2020-05-05 15:37:38
【问题描述】：

我想要在 .env 文件中维护一个可配置的默认颜色变量。例如，我想要一个 .env 文件，其中包含

PRIMARY=red

还有一个_variables.scss 文件，其中包含

$primary: ${process.env.PRIMARY}

还有一个 SCSS 文件，其中包含

.my-class { color: $primary; }

以及我使用包含样式表的组件

import './MyComponent.scss';

这可能吗？如果没有，我还有什么选择？

节点 v12.13.1
node-sass v4.13.1

【问题讨论】：

标签： create-react-app node-sass

【解决方案1】：

假设你正在使用 webpack 和 sass-loader（你需要弹出，如果你不介意额外的文件和更多的依赖更新，我认为这是值得的），修改你的 webpack.config.js 文件，如下所示：

const { castToSass } = require('node-sass-utils');

module.exports = {
...
  {
    test: /\.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader"
        options: {
          functions: {
            "env($variable)": variable => castToSass(process.env[variable]);
          }
        }
    }]
  }

现在你可以像这样创建一个文件_variables.scss：

$primary: env('primary');

如果这不起作用或者您需要更大的灵活性，请查看article I based it off of 并随时编辑我的答案。

【讨论】：

嗯，该死的。谢谢。我害怕这样的事情。我什至可能在研究时偶然发现了你的文章。我以前从未做过任何这样的事情，而且看起来非常令人生畏。我正在使用 create-react-app 和 node-sass，它可以正常工作，我不需要配置任何东西。
@Nenotlep 我同意，这可能不是你想做的事情。如果可能的话，你应该把颜色放在你的 _variables.scss 而不是环境变量中，我只是不明白你为什么要使用环境变量。
需要提供客户特定的视图定制。我的应用程序是我们的客户向他们的客户展示的应用程序；他们需要使用他们公司的颜色和标志。因此，我可以说 20 个不同的生产环境，它们都具有不同的自定义配色方案，我希望在 ENV 中对其进行配置，而不是试图记住在构建之前对其进行更改。有意义吗？
如果你碰巧在任何地方使用tailwind css，颜色真的很容易自定义tailwindcss.com/docs/customizing-colors/#app
嘿@JoelPeltonen，你有没有找到任何不弹出的解决方案？？

【解决方案2】：

罗伯特的回答是一个很好的线索，但它对我不起作用。我花了一个小时修复我的 Webpack 配置，我只想在这里分享结果，以免其他人在这里浪费时间。

您应该在sass-loader 的sassOptions 对象中创建您的函数，如下所示：（不需要使用node-sass-utils）

// Import node-sass at the top of your config file
const nodeSass = require('node-sass');


// Add this object to the sass-loader options object
sassOptions: {
    functions: {
        "env($variable)": variable => {
            const value = variable.getValue();
            const envValue = process.env[value]
            const sassValue = new nodeSass.types.String(envValue); 
            return sassValue;
        }
    }
}

然后您可以在您的 SASS 文件中使用任何环境变量，如下所示：

.my-class {
  color: env('ENV_VAR_NAME');
}

【讨论】：