当我对 JSON 文件进行更改时，如何使用 webpack-dev-server 和 sass-loader 编译 Sass？答案

【问题标题】：How can I use webpack-dev-server and sass-loader to compile Sass when I make changes to JSON files?当我对 JSON 文件进行更改时，如何使用 webpack-dev-server 和 sass-loader 编译 Sass？
【发布时间】：2019-10-07 06:55:18
【问题描述】：

我正在使用webpack-dev-server 和自定义 Sass 导入器来允许将 JSON 文件导入我的 Sass。问题是当我对导入到我的 Sass 中的 JSON 文件进行更改时，Sass 不会重新编译。对导入的其他 Sass 文件进行更改时，Sass 会按预期重新编译。

我认为这是因为 json 文件不是加载器的一部分 test：

{
    test: /\.scss$/,
    use: [
        {loader: 'style-loader'}, 
        {loader: 'css-loader'},
        {loader: 'postcss-loader', options: {
            sourceMap: true,
            plugins: () => [Autoprefixer]
        }}, 
        {loader: 'sass-loader', options: {
            sourceMap: true,
            data: transformJSONtoSass(app.options),
            importer: SassJSONImporter,
            outputStyle: 'expanded'
        }}
    ]
},

...但是如果我将test 值更改为/\.(scss|json)$/，那么加载器会尝试将 JSON 解析为 Sass 并抛出错误。所以本质上，每当我对某些指定的 JSON 文件进行更改时，我都需要 webpack 来触发我的 Sass 编译。我希望我可以在没有自定义加载器的情况下做到这一点。

提前感谢您的帮助。

【问题讨论】：

标签： webpack webpack-dev-server sass-loader

【解决方案1】：

假设尽管更改了文件类型，整个应用程序仍会重新编译，您可以尝试json-loader。

【讨论】：

谢谢，但不幸的是它似乎没有什么不同。