0

I'm using webpack-dev-server and a custom Sass importer to allow the importing of JSON files into my Sass. The problem is that when I make changes to the JSON files that are imported into my Sass, the Sass does not re-compile. When making changes to other Sass files that are imported, the Sass re-compiles as expected.

I figure this is down to json files not being part of the loader 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'
        }}
    ]
},

...but if I change the test value to /\.(scss|json)$/ then the loader tries to parse the JSON as Sass and will throw an error. So essentially, I need webpack to trigger a compile of my Sass whenever I make changes to some specified JSON files. I'm hoping I can do this without a custom loader.

Thanks in advance for any help.

ESR
  • 1,669
  • 1
  • 18
  • 22

1 Answers1

0

Assuming the whole app recompiles despite which file type changed, you can try json-loader.

Ari
  • 1,595
  • 12
  • 20