Sponsored by Gluten Free Waffles and Sliced Bananas

Friday, June 24, 2016

Webpack, stylelint, and sass-loader: Fixing block-closing-brace-newline-before and indentation warnings

8:18 PM Posted by Tyson Nero 4 comments
If you're using stylelint and sass-loader in your webpack.config, you may be running into issues with faulty block-closing-brace-newline-before and indentation warnings being reported and your transpiled CSS looking like the following:
.btn {
   font-size: 12px; }
If this is that case, you are mostly likely dealing with an issue from outputStylenested a default option set on node-sass. This issue can be found on Github: libsass doesn't preserve new lines in nested style - https://github.com/sass/libsass/issues/552
To avoid this, set the outputStyle: expanded option in your webpack.config and your CSS will output normally:
.btn {
   font-size: 12px; 
Simply add the following to your webpack.config:
sassLoader: {
  outputStyle: 'expanded'
More documentation can be found below if needed:


  1. This is exactly what i need. Thanks :)

  2. Yeah awesom information you shared here. Thanks

  3. When that is in which read more circumstance, you might be largely probably working with a concern coming from out put Style: nested any default alternative established about node-sass.

  4. You know after a hard day I decided to have fun and play games of chance I climbed a bunch of sites and only on this I understood what was happening prosperous best rated online casinos now I sit and spend all the time on this site