天天看点
返回

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源这里是引用

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。

本文摘要：主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源这里是引用

在前端开发中，样式是必不可少的一部分。编写样式最早是使用最原始的 css，随着前端工程化的发展，逐渐出现了很多 css 预处理器，如 scss/sacc、less、stylus 等。通过这些 css 预处理器，是通过对应的语言为 css 添加编程特性，帮助我们编写与时俱进、可维护性较高的样式代码。

Webpack 本身并不能识别各种样式资源（css、less、scss等），需要通过多种 loader（加载器）来帮助 Webpack 处理样式资源。

1 处理 CSS 资源

1.1 编写css代码

继续前一节的工程，在

src

目录下创建目录

style/css/

，并在css目录下创建文件

css-demo.css

：

.demo-css {
  width: 300px;
  height: 80px;
  background: red;
}

在

template/index.html

中标签后面添加一个 div 标签，class 属性为上面定义的样式

demo-css

:

<div class="demo-css">css demo</div>

由于之前在 webpack.config.js 指定了了 webpack 打包的入口文件为

src/main.js

，如果不在该文件、该文件直接或间接引入的文件中引入css-demo.css 文件，webpack是不知道要打包这个 css 文件的。所以需要在 main.js 中引入该 css 文件：

import './style/css/css-demo.css'

1.2 打包测试

现在执行前一节配置的 build 命令让 webpack 打包：

yarn build

。

执行后会发现报错：

ERROR in ./src/style/css/css-demo.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

从报错信息中可以看出 webpack 默认无法解析 css 文件。这时候就需要使用 loader 扩展 webpack 的处理能力。

1.3 安装依赖

webpack 处理 css 样式资源需要两个loader依赖：css-loader 和 style-loader。

yarn add css-loader style-loader -D

1.4 配置 css 相关 loader

在 webpack.config.js 中配置上面安装的两个 loader，配置后 webpack.config.js 文件如下：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  mode: 'development'
}

module 节点是新增的内容，该节点的rules 属性就是配置loader。rules 为一个数组，数组每个对象配置

针对什么类型的文件，使用哪些loader来处理

。每个对象属性意思分别如下：

  • test：处理什么文件，可以是具体的文件名，也可以是正则表达式。这里配置的

    /\.css$/

     表示以 css 结尾的文件，即所有css文件。
  • use：使用哪些loader来处理，多个loader的执行顺序为从下往上（如果写在一行，就是从右到左）。这里配置了

    style-loader

     和

    css-loader

     ，表示使用这两个loader来处理 css 文件，并且先使用

    css-loader

     来处理 css 文件，处理后的结果再使用

    style-loader

     来处理。那这两个loader分别是干啥用的呢？

css-loader： 把 css 文件编译为 CommonJS 模块，并将该模块引入到 JS 中。

style-loader：创建

style

标签，将 JS 中的 CSS 添加到 HTML中。

TODO 这里添加一张图描述

1.5 打包测试运行

配置好 webpack.config.js 后，便可以运行 build 命令让 webpack 打包了。

yarn build

这时可以看到 webpack 打包成功。

webpack 5.73.0 compiled successfully in 632 ms

在浏览器中运行

template/index.html

，可以看到 css-demo.css 中定义的样式已经生效。查看网页元素，可以在head中看到上面定义的样式插入到style标签里面：

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

2 处理 scss/sass 资源

scss 与 sass 类似，只是在写法上面，sass 不使用花括号和分号。

2.1 编写 scss/sass 代码

在

src/style

目录下创建目录

scss

，并在

scss

中分别创建样式文件

scss-demo.scss

和

sass-demo.sass

。

scss-demo.scss：

.demo-scss {
  width: 300px;
  height: 80px;
  background: blue;
}

Sass-demo.scss:

.demo-sass
  width: 300px
  height: 80px
  background: darkblue

在

template/index.html

中添加测试元素div:

<div class="demo-scss">scss demo</div>
<div class="demo-sass">sass demo</div>

在

src/main.js

中引入上面两个样式文件：

import './style/scss/scss-demo.scss'
import './style/scss/sass-demo.sass'

2.2 安装依赖

处理 scss 文件，需要使用到 sass、sass-loader、css-loader 和 style-loader。sass-loader 用于将 scss/sass 文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。sass-loader 需要依赖 sass。

由于前面已经安装了 css-loader 和 style-loader，此处再安装 sass 和 sass-loader 即可。

yarn add sass sass-loader -D

2.3 配置 scss/sass 相关loader

上面在rules中配置了针对 css 文件的 loader，现继续在后面配置针对 scss/sass 配置的loader：

module: {
    rules: [
      ...
      {
        test: /\.s[ca]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  },

TODO 添加一个图

2.4 打包测试运行

先执行

yarn build

打包，打包成功后在浏览器中查看：

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

3 处理 less 资源

3.1 编写 less 代码

在

src/style

目录下创建目录

less

，并在

less

中创建样式文件

less-demo.less

：

less-demo.scss：

.demo-less {
  width: 300px;
  height: 80px;
  background: green;
}

在

template/index.html

中添加测试元素div:

<div class="demo-less">less demo</div>

在

src/main.js

中引入上面两个样式文件：

import './style/less/less-demo.less'

3.2 安装依赖

处理 less 文件，需要使用到 less-loader、css-loader 和 style-loader。less-loader 用于将 less 文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。less-loader 依赖于 less。

yarn add less less-loader -D

3.3 配置 less 相关loader

在rules中配置了针对 less 文件的 loader:

module: {
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      }
    ]
  },

TODO 添加一个图

3.4 打包测试运行

先执行

yarn build

打包，打包成功后在浏览器中查看：

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

4 处理 stylus 资源

stylus 的语法更加简洁，除了省略花括号和分号，连冒号也省略了。但是要严格注意缩进。

4.1 编写 stylus 代码

在

src/style

目录下创建目录

stylus

，并在

stylus

中创建样式文件

stylus-demo.styl

：

.demo-stylus
  width 300px
  height 80px
  background yellow

在

template/index.html

中添加测试元素div:

<div class="demo-stylus">stylus demo</div>

在

src/main.js

中引入上面两个样式文件：

import './style/stylus/stylus-demo.styl'

4.2 安装依赖

处理 stylus 文件，需要使用到 stylus-loader、css-loader 和 style-loader。stylus-loader 用于将 styl文件编译为 css 文件，编译后的 css 文件依次经过 css-loader 和 style-loader 处理，最后通过style标签插入到HTML中。stylus-loader 依赖于 stylus。

yarn add stylus stylus-loader -D

4.3 配置 stylus 相关loader

在rules中配置了针对 less 文件的 loader:

module: {
    rules: [
      ...
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },

TODO 添加一个图

4.4 打包测试运行

先执行

yarn build

打包，打包成功后在浏览器中查看：

Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

今日优雅哥（youyacoder）学习结束，期待关注留言分享~~

webpack 5
上一篇: Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源
下一篇: 前端处理 input 元素的 files 属性时报错【m.map is not a function】

继续阅读