如何在 Webpack 中配置 LESS

前言

Webpack 是一款强大的 JavaScript 模块打包工具，它可以帮助前端开发者在项目中使用各种预处理器（如 LESS、SASS 等），使得开发效率大大提升。本文将为大家介绍如何在 Webpack 中配置 LESS，并提供详细的步骤、说明和示例代码，希望对大家有所帮助。

步骤

安装依赖

在使用 LESS 前，需安装相关依赖。使用以下命令进行安装：

npm install less less-loader --save-dev

配置 webpack.config.js

在项目中配置 webpack.config.js，以支持 LESS：

// javascriptcn.com 代码示例
module.exports = {
  // 其他配置项
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
    ],
  },
};

以上配置项的作用：

• test：正则匹配符合规则的文件；
• style-loader：将 CSS 代码以