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 1 comment
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:
https://github.com/jtangelder/sass-loader
https://github.com/sass/node-sass