前言

上一节中,我们已经成功将 css 抽离出来了,但是目前为了书写的方便,我们更多的使用 scss 或者 less,这里我们将使用 scss,less 的原理基本相同.

安装插件

这里我们将使用到sass-loader

1
npm install sass-loader sass webpack --save-dev

编辑 webpakc.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// change

module: {
    rules: [
      {
        // 这里已经使用scss了
        test: /\.scss$/,
        use: [
          // 提取css
          MiniCssExtractPlugin.loader,
          "css-loader",
          // 将scss转变为css
          "sass-loader",
        ],
      },
    ],
  },

仅有图中部分有所改变,其余保持不变.

img

注意!!! 不要忘记,将我们之前的style.css更改后缀,变成style.scss,同时,我们在index.js引入了style.css,所以也要改成
此时的目录结构,dist目录为打包后生成的,这里暂时忽略.

1
2
3
4
5
6
7
8
9
webpack
|- /node_modules;
|- /src
  |- index.html
  |- index.js
  |- style.scss
|- package-lock.json
|- package.json;
|- webpack.config.js
1
2
3
4
// index.js
import './style.scss';

console.log('hello webpack');

我们稍微对style.scss进行一个修改

1
2
3
4
5
6
7
// style.scss
body {
  background-color: hotpink;
  p {
    color: red;
  }
}

这里我们需要了解 webpack loader 的加载顺序,从下到上,从右到左,所以我们在编辑的时候需要根据具体的顺序书写,不能过于随意.
执行 npm run build
我们可以看到dist目录下生成了built.css,并且已经将 scss 转成 css,意味着我们的 scss 配置完毕.