docs: suggested webpack config needlessly includes precss
Created by: oschonrock
https://getbootstrap.com/docs/4.0/getting-started/webpack/
Suggests:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles SASS to CSS
}]
},
...
This a great starting point. Autoprefixer is required because the scss files don't include the vendor prefixes, so we need postcss. But I did wonder why the "precss" plugin is also suggested. As I understand it precss allows some "scss-like" mixins, variables, etc with slightly different syntax. Surely this is already covered by sass-loader which compiles the provided scss files? And because sass-loader runs first, it has already compiled all those scss features. So precss => NOP?
I tested with and without precss. The only difference in output appears to be that precss strips the :root { ... list of custom css variables ... } and formats the bulk of the css with multiple selectors per line. The official dist css files do have the custom css vars. They are not actually used anywhere, and would not work in IE11 anyway, but might be useful for reference from any custom js?
So: "less is more" ?
Suggest removing "precss" plugin from this suggested webpack config.