细说 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 文件来供页面单独引入。若是你们喜欢萝卜分享的文章，能够点击关注，天天都有新的分享。