如何使用laravel mix和webpack将环境变量传递到scss / sass文件？

Question

我有一个环境变量CDN_URL，我想将此变量发送到SCSS文件。我也尝试过sass-loader的prependData。

Answer 1

您可以使用sass-loader将数据添加到SASS中>

例如，从CDN_URL传递.env

扩展webpack.mix.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: '$env: ' + process.env.CDN_URL + ';',
            },
          },
        ],
      },
    ],
  },
};

Answer 2

您可以通过在.env文件中的密钥前面加上MIX_来将环境变量注入Laravel Webpack Mix。在.env文件中定义变量后，可以通过process.env对象进行访问。