Question

我有一个环境变量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}');
}

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

就我而言，我正在运行一个盖茨比站点。在每次构建之前，它都会运行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中。或研究正确的方法。

Answer 3

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

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

进行访问

process.env.MIX_CDN_URL

您可以sass-loader将获得您想要的结果。

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

3 个答案: