Does not inject css - always does page refresh

[dmitrybelyakov]

Hi!

I can't seem to get CSS injections working - it just keeps refreshing the page.

[malinbranduse]

Hi @dmitrybelyakov! If you're interested in CSS injection check out my pull request #40 I'm using it all the time and it works.

Hopefully will be merged soon... @Va1 Can you please review it?

[dmitrybelyakov]

Hi, @malinushj

Thanks for the advise - I tried your branch instead, but I'm getting pretty weird results: the injection happens only every other time. I've put some debug code in your module to log what assets are being compiled and the value of isCSS variable that triggers your logic. I am getting alternating behaviour whenever i change my sass file:

• CSS asset is being reported, injection happens
• Main JS asset is being reported, browser reloads
• CSS asset is being reported, injection happens
• etc

This is super weird and I'm pretty confused at that point. My setup is pretty straightforward: css!postcss!sass loaders, and extract text plugin. Im importing my main scss file into my main javascript file as a module.

[dmitrybelyakov]

@malinushj

Do you by any chance have a minimalistic webpack.config.js where the plugin is set up and working?

[malinbranduse]

@dmitrybelyakov So you're saying even when you save your sass file, the main js asset is being emitted thus the browser reloads? Otherwise, isCSS is true only when all emitted assets are css, so when you save a js file or anything else the browser reloads.

my config is fairly straightforward

            {
                test: /\.sass$/,
                loaders: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader", options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "sass-loader", options: {
                            sourceMap: true
                        }
                    }]
                })
            }

and the plugin:

        new BrowserSyncPlugin({

            files: [
                "**/*.php",
            ],
            host: 'localhost',
            port: 3000,
            proxy: 'http://site.dev/'

        })

[malinbranduse]

Maybe it's something to do with how post-css emits files. If it still doesn't work, give me your config so I can try to reproduce the problem

[dmitrybelyakov]

@malinushj yep - whenever i save a sass file both css and js files are emitted, but only every odd time, so it alternates between injecting and reloading the browser.

Thanks for your config - I will try that now!

[dmitrybelyakov]

@malinushj I was able to reproduce the issue with your config. Here is my setup (the only thing I changed was the test pattern for scss): https://gist.github.com/dmitrybelyakov/4eeb9a418d654e97d9d33625836ae5fd

P.S. Thanks for your help by the way - really appreciate it!

[malinbranduse]

@dmitrybelyakov man, that is weird! It works fine for me... Just to check, inside index.js you're doing something like require('./scss/file.scss'); ?

[malinbranduse]

In your terminal/console does it also show this alteration?

This is how it looks for me when I save a sass file

And like this when I save a js file

[dmitrybelyakov]

@malinushj i know mate! it's so frustrating! and yes, this is exactly how I require my main.scss from javascript.

This is what i get when I save a scss file twice (as you can see from my webpack config i'm not doing any javascripts at the moment):

Then it just alternates between doing just the css, or doing both css and js.

[dmitrybelyakov]

@malinushj here, i extracted all the frontend and created a repo to demonstrate that: https://github.com/dmitrybelyakov/webpack-browsersync

it's is a super simple setup, but still does not work right - do you think it is possible that something might have changed in webpack between yours version 3 and mine 3.4 ?

[malinbranduse]

@dmitrybelyakov Sooo I managed to fix it! the problem is with extract-text-webpack-plugin, to be specific version 3.0.0. I falled back to version2.1.2 and it all works. Chose this version because it's the latest build prior to 3.0.0 as you can see here

put this version inside package.json "extract-text-webpack-plugin": "^2.1.2",

alternatively, use npm install extract-text-webpack-plugin@2.1.2 just to be sure you have that version.

Proof it works:

[malinbranduse]

I guess we should post this issue to their repo? But even if we're lazy we can just wait because 3.0.0 is a major release that is quite new so I'm sure they have other problems as well. 😄

[dmitrybelyakov]

@malinushj great mate! I will test it tomorrow. I will also dig further into 3.0 to find out what the exact issue was and report my findings. I will also think of what is the best way of reporting that to extract-text guys.

Cheers!

[dmitrybelyakov]

@malinushj you are amazing!

[malinbranduse]

Cheers man! Yea, I will investigate the issue as well. Maybe we can branch your demo repo, one branch that works properly, with version 2.1.2 and one that doesn't with 3.0.0

[dmitrybelyakov]

Sure! I will do it!

[dmitrybelyakov]

@malinushj I can confirm that downgrading to extract text v2.1 solves the issue. Unfortunately this is not a very future-proof solution.

I have created an issue with extract-text guys and I hope I managed to explain the issue clearly. Here's the link to that new issue (feel free to add any details you see relevant):

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/593

[mdmoreau]

@dmitrybelyakov @malinushj I was running into this same issue and ended up using https://github.com/peerigon/extract-loader and https://github.com/webpack-contrib/file-loader as a workaround. It seems like certain plugins (I've noticed extract-text, uglifyjs) cause the main JS file to always be emitted, even if only CSS was changed.

I'm not sure if there's any major downside to using a loader vs plugin for this, but figured I'd share what I ended up using. My setup uses postcss-loader > css-loader > extract-loader > file-loader and has worked perfectly with Browsersync so far.

[Va1]

PR #40 was merged and new plugin option injectCss was introduced. changes were released with version 2.0.1 and are available on NPM already. thanks everyone and @malinushj in particular.