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

Question

我正在使用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的编译。我希望我可以在没有自定义加载程序的情况下完成此操作。

在此先感谢您的帮助。

Answer 1

假设无论哪种文件类型发生更改，整个应用程序都可以重新编译，则可以尝试json-loader。