Vue 项目之 Webpack 处理 less 文件

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

1. less-loader 的使用

1.1 如何处理 less 文件

在开发中，我们可能会使用 less、sass、stylus 等预处理器（通过它们可以对 css 做一些增强，比如可以定义变量、嵌套编写等等）来编写 css 样式，以提高效率。那就意味着在开发中，我们的项目中可能还会有这些预处理器语言对应的文件，我们这里拿 .less 文件举例。

我们在之前的项目中的 src/css 目录下新建 title.less 文件，在里面添加一些 less 代码：

@bgColor: skyblue;
@textDecoration: underline;

.title {
  background-color: @bgColor;
  text-decoration: @textDecoration;
}

上面的 less 代码中，我们定义了两个变量：@bgColor 和 @textDecoration，然后使用了它们。我们知道，如果当前运行 npm run build 命令对项目进行打包，这个 less 文件是不会被打包的，因为它没有被加入 webpack 的依赖图中。所以，要将这个 less 文件加入到依赖图中，我们可以来到 ./src/js/element.js 中，导入这个 title.less 文件：

import '../css/style.css';
import '../css/title.less'; // 导入 less 文件

const el = document.createElement('div');
...

再来运行 npm run build 命令：

你会发现，打包过程出现了意料之中的错误信息，因为我们还没有配置任何的 loader 来处理 .less 类型的文件。

1.2 Less 工具处理

在引入相关的 loader 处理 less 文件之前，我们先来补充一个小的知识点：关于 less（或者 sass）这些东西，我们到底是如何处理它们的。

我们首先要知道，浏览器是不认识 less 代码的，所以我们需要把 less 代码转换成普通的 css 代码，这就需要借助一个工具（命令）：lessc（其实就是指 less compiler）。不过，我们会安装 less 这个工具，它内部会帮助我们使用 lessc 命令对 less 代码进行转换，转换成 css 代码。

lessc 就是用来将 less 代码转换为普通的 css 代码的，它是一个独立的工具，与 webpack 无关。

我们可以全局安装 less 这个工具：

npm install less -g

上述全局安装的命令会自动帮助我们全局安装 lessc 的。不过因为我们项目中也要用这个 less 工具，所以我们这里进行局部安装：

npm install less -D

安装完成后，就可以看到 ./node_modules/.bin/ 目录下已经有 lessc 了。

下面，我们先在项目目录下新建一个 test.less 文件进行测试，把前面 title.less 中的代码拷贝一份过来。然后，我们就可以通过 npx 命令（之前讲过，它会去找 node_modules/.bin 下对应的命令）使用 lessc 对 test.less 文件进行编译了：

npx lessc ./test.less demo.css

上述命令的意思是：通过 lessc 这个工具把当前目录下的 test.less 这个文件转换成 demo.css 这个文件。成功执行后，项目目录下会多出一个 demo.css 文件，该文件的内容就是 test.less 文件中 less 代码转换后的 css 代码了：

所以，这就是 lessc 工具的作用：把 less 文件转换成普通的 css 文件。

那回过头来，我们要转换前面已经加入 webpack 依赖图中的 title.less 文件，是不是也是用这个方式来完成呢？答案是否定的，因为开发中我们的项目中可能会有一大堆的 less 文件，如果我们以这种方式在命令行中一个一个地转换文件显然是不现实的。所以，我们应该交给 webpack 去做，让 webpack 在打包过程中遇到 less 文件时，去使用 lessc 对 less 文件进行编译。那么具体该怎么做呢？这时，我们就需要使用 less-loader 帮助我们完成遇到 less 文件时去使用 lessc 的过程了。

1.3 less-loader 处理

因为 less-loader 会利用 lessc 对 less 文件进行处理，所以，下面我们就可以去指定在加载 less 文件时使用 less-loader 进行处理。

先来安装 less-loader（因为 less-loader 会用到 lessc，所以在安装 less-loader 的之前，要确保先安装 less，这里因为前面已经安装了 less 了，所以就没有再进行安装）：

npm install less-loader -D

再来到 webpack.config.js 中进行配置：

...

// 导出配置信息
module.exports = {
  ...
  module: {
    rules: [
      {
        ...
      },
      {
        test: /\.less$/i, // 可以加 i，表示忽略大小写进行匹配
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

需要注意的是，less-loader 只是把 less 文件转成了 css 文件，后续对 css 的处理依然需要使用 css-loader，然后再使用 style-loader 将 css 代码插入进 html 文档中让样式显示出来。

配置完后再来运行 npm run build 进行打包，就会发现可以成功打包了，页面上相应的样式也已经生效了：

以上，就是关于 less-loader 的使用过程。