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

Question

我想要在 .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

Answer 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 并随时编辑我的答案。

Answer 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');
}

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

How can I use environment variables in node-sass .scss files?

node-sass

create-react-app