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

【问题标题】：How I can pass environment variables to scss/ sass file using laravel mix and webpack?如何使用 laravel mix 和 webpack 将环境变量传递给 scss/sass 文件？
【发布时间】：2020-01-30 02:56:41
【问题描述】：

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

我必须使用 Laravel 5.7、Laravel Mix 4.1.2 和 webpack 4.27.1

错误：“...加载样式”后的 CSS 无效：预期 1 个选择器或规则，是“var content = requi”

以下是我的“webpack.mix.js”文件代码。

mix.webpackConfig({
module: {
    rules: [
        {
            test: /\.s[ac]ss$/i,
            use: [
                'vue-style-loader',
                'style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        indentedSyntax: true,
                        prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
                    },
                },
            ],
        },
    ],
},

});

以下是我的“_functions.scss”文件代码：

@function asset($type, $file) {
 @return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}

【问题讨论】：

标签： laravel webpack webpack-4 laravel-mix scss-lint

【解决方案1】：

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

例如从.env传递CDN_URL

扩展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 + ';',
            },
          },
        ],
      },
    ],
  },
};

【讨论】：

我使用它，但出现以下错误：“...加载样式”后 CSS 无效：预期 1 个选择器或规则，是“var content = requi”我使用 Laravel 5.7 ，Laravel Mix 4.1.2 和 webpack webpack 4.27.1。
我们无法判断您是否不包含您的 SASS 文件
_functions.scss: ``` @function assets($type, $file) { @return url('#{$cdn-s3-static-url}#{$asset-base-path }#{$type}/#{$file}'); } ```

【解决方案2】：

就我而言，我正在运行一个 gatsby 网站。在每次构建之前，它都会运行 gatsby-config.js，它可以访问环境变量。

所以在构建的 .js 文件的顶部，在 module.exports 之前，我放了这个：

if(process.env.NODE_ENV === 'development') {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
  fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}

这会生成一个如下所示的文件：

$root: "/development-path/";

然后在我需要依赖 ENV 的行为的 SCSS 文件中，我有：

@import './build-style.scss';
@font-face {
  font-family: "MyFontFamily";
  src: url($root + "font/MyFontFamily.woff") format('woff');
}

现在我的资产（本例中的字体）根据我的开发/生产环境变量从不同的位置加载。

感觉就像一个大黑客，我确信在某个地方有更正确的方法，但这让我在停工一个小时后再次移动，并且到目前为止它正在工作。将来我可能会将其扩展为具有build-style-dev.scss、build-style-prod.scss，并在编译时将它们复制到build-style.scss。或者研究一下正确的方法。

【讨论】：

【解决方案3】：

您可以通过在 .env 文件中使用 MIX_ 前缀来将环境变量注入 Laravel Webpack Mix。在 .env 文件中定义变量后，您可以通过 process.env 对象访问。

因此，在您的示例中，您应该在 .env 文件中创建一个新变量，例如 MIX_CDN_URL 并在 webpack.mix.js 中创建一个新变量，您可以使用

process.env.MIX_CDN_URL

您可以sass-loader，这将达到您想要的结果。

【讨论】：

进程是nodejs的东西，OP正在寻找一种将它传递给SASS而不是Javascript的方法