Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BrowserSync with MiniCssExtractPlugin and reload on inject changes from scss #88

Open
saltnpixels opened this issue Jul 23, 2020 · 1 comment

Comments

@saltnpixels
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant