For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
{{< highlight js >}}
-...
+// ...
{
test: /\.(scss)$/,
use: [{
- loader: 'style-loader', // inject CSS to page
+ // inject CSS to page
+ loader: 'style-loader'
}, {
- loader: 'css-loader', // translates CSS into CommonJS modules
+ // translates CSS into CommonJS modules
+ loader: 'css-loader'
}, {
- loader: 'postcss-loader', // Run postcss actions
+ // Run postcss actions
+ loader: 'postcss-loader',
options: {
+ // `postcssOptions` is needed for postcss 8.x;
+ // if you use postcss 7.x skip the key
postcssOptions: {
- plugins: function () { // post css plugins, can be exported to postcss.config.js
+ // postcss plugins, can be exported to postcss.config.js
+ plugins: function () {
return [
require('autoprefixer')
];
}
}
}, {
- loader: 'sass-loader' // compiles Sass to CSS
+ // compiles Sass to CSS
+ loader: 'sass-loader'
}]
-},
-...
+}
+// ...
{{< /highlight >}}
### Importing Compiled CSS
In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
{{< highlight js >}}
-...
+// ...
module: {
rules: [
{
test: /\.css$/,
- use: ['style-loader', 'css-loader']
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
}
]
}
-...
+// ...
{{< /highlight >}}