将数据从 Webpack 配置传递到 SASS答案

【问题标题】：Passing data from Webpack config to SASS将数据从 Webpack 配置传递到 SASS
【发布时间】：2021-05-30 04:52:39
【问题描述】：

我正在尝试使用 sass-loader's additionalData 选项将数据 ($test: red;) 从我的 webpack 配置传递到 .scss 文件：

{
  test: /\.s?css$/,
  use: [
    'style-loader',
    "css-loader",
    {
      loader: 'sass-loader',
      options: {
        additionalData: '$test: red;' // < -- This is the relevant line. 
      },
    },
  ]
},

尝试在.scss 文件中使用它：

div {
  background-color: $test;
}

这会导致错误，$test 未定义。

我尝试了 related question 和 github issue 中建议的不同方法，但无济于事。也许我的.scss 文件中缺少导入语句？否则，我想不出我做错了什么。

package.json中可能的相关信息：

"css-loader": "^5.0.1",
"node-sass": "^4.14.1",
"sass": "^1.26.10",
"sass-loader": "^9.0.0",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",

【问题讨论】：

我试过了，但一切正常。您可以尝试调试，看看在这个过程中会发生什么。例如，在sass-loader/dist/utils.js 的函数getSassOptions 中检查options.data。

标签： webpack sass

【解决方案1】：

尝试替换

测试：/.s?css$/,

与

测试：/.scss$/,

你也错过了一个输出 IE 选项：{ outputPath：'css/'，名称：'[name].min.css'}

【讨论】：

使用 sass 加载器定位我的文件不是问题，文件由 webpack 处理，否则没有任何问题。