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/postcss/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
- }, {
- 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')
- ];
- }
+...
+{
+ test: /\.(scss)$/,
+ use: [{
+ loader: 'style-loader', // inject CSS to page
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS modules
+ }, {
+ loader: 'postcss-loader', // Run postcss actions
+ options: {
+ plugins: function () { // postcss plugins, can be exported to postcss.config.js
+ return [
+ require('autoprefixer')
+ ];
}
- }, {
- loader: 'sass-loader' // compiles Sass to CSS
- }]
- },
- ...
+ }
+ }, {
+ loader: 'sass-loader' // compiles Sass to CSS
+ }]
+},
+...
{% endhighlight %}
### 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']
- }
- ]
- }
- ...
+...
+module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ }
+ ]
+}
+...
{% endhighlight %}