Logbuch

browsersync reload on sass/scss

Browsersync not reloading or injecting css changes-workaround

Let´s say you have a file structure like this:


build
-script
--default.min.js
-styles
--default.min.css
js
-default.js
sass
_head.scss
_body.scss
_footer.scss
default.css

On every scss change grunt(should work with gulp as well)will generate a new default.min.css file in your build/styles folder without reloading the browser in connection the old file is updated or replaced.The trick is,that browsersync doesn´t trigger on css but on scss file extensions.So the only thing you have to do is to generate the default.min.css twice for example as default-reload.scss inside the build/styles folder and browsersync will trigger at the right time.

So if you are using the grunt-contrib-cssmin plugin add another task like this:

cssmin:{
...

default:{

files:{

'build/styles/default.min.css':'sass/default.css'

},

},

syncTrigger:{

files:{

'build/styles/default-reload.scss':'sass/default.css'

},

},

},

That´s it.Maybe there is a faster way,if you use concat and duplicate the default.css.min file an just rename it to.scss.Leave a comment the way you did it.

Kommentare

Bitte rechnen Sie 3 plus 5.
Über neue Kommentare per E-Mail benachrichtigen (Sie können das Abonnement jederzeit beenden)