细说 webpack 8. 使用 loader 转换 css 文件

大家好！我是萝卜，Webpack 中一切皆模块，我们可以将CSS作为模块引入到代码中，这时候就需要添加 Webpack 的loader 来处理 CSS 了。

css-loader

首先添加 css-loader：

npm i -D css-loader

然后给webpack.config.js添加rule：

{
  module: {
    rules: {
      {
        test: /\.css$/,
        use: [‘css-loader’]
      }
    }
  }
}

这时候修改js文件，添加下面代码：

import css from ‘./css/index.css’;
console.log(css, css.toString());

这时候 CSS 会被转成字符串， JS 就可以直接使用。

除了上面直接在webpack.config.js中添加rule，还可以在 JavaScript 中直接使用下面的方式引入：

import css from ‘css-loader!./css/index.css’;
console.log(css, css.toString());

style-loader

有了 css-loader 可以识别 CSS 语法了，下面就需要 style-loader 出场了。简单来说，style-loader 是将 css-loader 打包好的 CSS 代码以 <style> 标签的形式插入到 HTML 文件中，所以style-loader是和css-loader成对出现的，并且style-loader是在css-loader之后。首先安装style-loader：

npm i -D style-loader

mini-css-extract-plugin

CSS 作为 <style> 标签放到 HTML 内还是不够的，我们还需要将 CSS 以 <link> 的方式通过 URL 的方式引入进来，这时候就需要使用 mini-css-extract-plugin 这个插件了，首先安装它：

npm i -D mini-css-extract-plugin

mini-css-extract-plugin这个使用的时候需要分别配置 loader 和 plugin，loader 需要放在css-loader之后代替style-loader：

module.exports = {
  plugins: [
    // 添加 插件 plugin
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        // 添加 loader
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
}

CSS Modules

CSS Modules 指的是所有的 CSS 类名及其动画名都只是局部作用域的 CSS 文件。CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建过程中对 CSS 类名选择器限定作用域的一种方式，CSS Modules 主要解决的问题有：

1.解决 CSS 类都是全局的，容易造成全局污染（样式冲突）；

2.JS 和 CSS 共享类名；

3.可以方便的编写出更加健壮和扩展方便的 CSS。

这类 CSS 模块化的解决方案很早之前前端社区就有一些讨论和方案，比如最早的通过 CSS 命名约定的 BEM、OOCSS 等，再到 React 中使用的用 JavaScript 来写 CSS 规则的 CSS in JS 方案，再到通过编译工具来帮助 JavaScript 可以使用 CSS 的 CSS Modules 方案。

下面来看下 CSS Modules 究竟是什么，我们来看下代码表现，首先创建一个app.css文件，内容如下：

/* app.css */
.elment {
 background-color: blue;
 color: white;
 font-size: 24px;
}

我们知道了，在 JS 中可以直接import一个 CSS 文件：

// app.js
import styles from ‘./app.css’

我们知道了，在 JS 中可以直接import一个 CSS 文件：

// app.js
import styles from ‘./app.css’;
let element = `
    <div class=”${styles.element}”>
      CSS Module
    </div>
`;
 
document.write(element);

在 css-loader 增加modules的选项，说明打开 CSS Modules 支持。

module.export = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
}

跟 CSS Modules 相关的配置还有很多，具体可以在css-loader对应的文档找到。

CSS 预处理器

由于 CSS 标准自诞生以来，一直致力于在表现力层面的发展，相对基本语法和核心机制并没有实质性的变化，所以产生了好多 CSS 的预处理器。预处理器补足了 CSS 的一些语法上的缺陷，支持变量、运算、函数、作用域、继承、嵌套写法等，使用 CSS 预处理器可以大大的提升开发效率和体验，同时能够更好的做好模块化开发。

Tips：CSS 核心语法直到近些年才有大的发展，比如自定义属性（custom properties，又称为变量 variables）、嵌套写法，但是已经远远的落后于 CSS 预处理器的发展。

常见的 CSS 预处理器有：Less，Sass 及其语法变种 Scss和Stylus。

1.使用预处理器 loader

下面以 Less 预处理器为例，介绍 CSS 预处理器的用法。首先安装对应的 loader：less-loader：

npm i -D less-loader

然后修改webpack.config.js：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader' // 将 less 编译为 CSS
      }
    ]
  }
}

less-loader只是将 Less 语法编译成 CSS，后续还需要使用css-loader和style-loader处理才可以，所以一般来说需要配合使用：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          'less-loader' // 将 less 编译为 CSS
        ]
      }
    ]
  }
}

Tips：注意一些预处理语言需要安装对应的解析器，例如 sass-loader，需要同时安装 node-sass：npm install sass-loader node-sass --save-dev

小结

本篇要介绍了 Webpack 中 CSS 相关的配置，主要内容包含：CSS Webpack 配置、CSS 预处理器配置。CSS 配置相对来说比较复杂，如果我们使用 CSS 的预处理器来编写代码，首先需要配置对应的预处理器 loader，将扩展的语法转成 CSS 代码，然后在配合 css-loader 和 style-loader。在生产环境推荐使用 mini-css-extract-plugin 将 CSS 内容导出到 CSS 文件来供页面单独引入。如果大家喜欢萝卜分享的文章，可以点击关注，每天都有新的分享。