From bc2a98522d80b98431990347711789fb59faa7a9 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 20 Oct 2018 22:59:27 +0300
Subject: [PATCH] webpack page: Remove precss reference
---
site/docs/4.1/getting-started/webpack.md | 61 ++++++++++++------------
1 file changed, 30 insertions(+), 31 deletions(-)
diff --git a/site/docs/4.1/getting-started/webpack.md b/site/docs/4.1/getting-started/webpack.md
index 59211b075d..9a77dbda49 100644
--- a/site/docs/4.1/getting-started/webpack.md
+++ b/site/docs/4.1/getting-started/webpack.md
@@ -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:
{% 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
@@ -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).
{% highlight js %}
- ...
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- }
- ]
- }
- ...
+...
+module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ }
+ ]
+}
+...
{% endhighlight %}
--
GitLab