rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

webpack page: Remove precss reference

Browse Source
This commit is contained in:
XhmikosR 2018-10-20 22:59:27 +03:00
parent 2c1a743cc9
commit bc2a98522d
1 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
site/docs/4.1/getting-started/webpack.md
View File

@ -46,28 +46,27 @@ First, create your own `_custom.scss` and use it to override the [built-in custo
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: 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 %} {% highlight js %}
... ...
{ {
test: /\.(scss)$/, test: /\.(scss)$/,
use: [{ use: [{
loader: 'style-loader', // inject CSS to page loader: 'style-loader', // inject CSS to page
}, { }, {
loader: 'css-loader', // translates CSS into CommonJS modules loader: 'css-loader', // translates CSS into CommonJS modules
}, { }, {
loader: 'postcss-loader', // Run post css actions loader: 'postcss-loader', // Run postcss actions
options: { options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [ return [
require('precss'), require('autoprefixer')
require('autoprefixer') ];
];
}
} }
}, { }
loader: 'sass-loader' // compiles Sass to CSS }, {
}] loader: 'sass-loader' // compiles Sass to CSS
}, }]
... },
...
{% endhighlight %} {% endhighlight %}
### Importing Compiled CSS ### Importing Compiled CSS
@ -81,14 +80,14 @@ import 'bootstrap/dist/css/bootstrap.min.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). 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 %} {% highlight js %}
... ...
module: { module: {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
} }
] ]
} }
... ...
{% endhighlight %} {% endhighlight %}