BrowserSync with MiniCssExtractPlugin and reload on inject changes from scss

[saltnpixels]

I am using this plugin with the mini css extract plugin. I am also using sass loader.

Even though I am using injectCss: true in the plugin options, it does a full reload because somehow i guess it is sensing changes to javascript files?

It works when i edit JUST a css file. However if I touch a .scss file it does a full reload. Any advice?

reload: false does work, but then it wont reload for js files at all. :/

Code:

plugins: [
      new MiniCssExtractPlugin(),
      new BrowserSyncPlugin({
             host: themeConfig.server,
             proxy: themeConfig.server,
             https: true,
             files: [
                '**/*.php',
                '**/*.css',
             ],
             reloadDelay: 0
          }, { injectCss: true, } //make css load without reload
      ),
   ]

[saltnpixels]

After playing around I got it to work like this: It feels like a bandaid though

plugins: [
      new MiniCssExtractPlugin(),
      new BrowserSyncPlugin({
             host: themeConfig.server,
             proxy: themeConfig.server,
             https: true,
             files: [
                '**/*.php',
                '**/*.css',
                {
                   match: '**/*.js',
                   options:{
                      ignored: 'dist/**/*.js' //the js output folder
                   }
                }
             ],
             reloadDelay: 0
          }, { reload: false } 
      ),
   ]

Because the reload is false, it wont reload and forces the inject css. I could not get injectCSS to work at all. The problem with reload false is that js will not reload at all, unless its added as a file to watch. Adding **/*.js will make EVERYTHING reload because the sass is being loaded through js using sass loader.

To fix this I ignored the dist folder which is where my output path is set to put the js files webpack creates.