学习less，从这里开始！

一、less 是什么？

less 是 css 的扩展语法，让 css编码工作变的更简单。

1、使用场景

如果要给项目中所有元素加上一个颜色，你会怎么做？

• CSS 解决方法：找出所有元素并加上 color 属性。

/* style.css */

p {
    color: red;
}

button {
    color: red;
}
...

• 问题：当需要更换颜色时，工作量就非常大了，用 less 就非常容易解决，定义一个变量即可，如下：

/* style.less */
@color: red;

p {
    color: @color;
}

button {
    color: @color;
}
...

二、怎么使用？

less 编写的代码无法直接运行，需要通过 less-loader 插件转换成 css 代码，再用 webpack 打包后，浏览器才能正常打开。

1、新建 webpack 项目

# 1、初始化一个新的 webpack 项目
mkdir learn-webpack
cd learn-webpack
npx webpack-cli init

# 2、按照下面选择进行
? Which of the following JS solutions do you want to use? none
? Do you want to use webpack-dev-server? No
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? none
? Do you like to install prettier to format generated configuration? No
? Pick a package manager: npm

2、编写 less 并修改配置

• 新建 src/style.less 文件，复制下面代码到文件。

@color: red;

h2 {
    color: @color;
}

• 修改 src/index.js 文件，如下：

import './style.less';

console.log("Hello webpack!")

• 修改 webpack.config.js 文件，增加下面 less 相关配置：

module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: 'asset',
      },
      {
        test: /\.less/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
},

• 安装 less 及其相关 loader

npm install style-loader css-loader less-loader less

3、运行项目

# 执行转换
npm run build

完成后，项目根目录会产生 dist 文件夹，浏览器可打开 index.html 文件查看字体被修改成红色了。

三、参考文档

• 学习less，从这里开始！