一、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 文件查看字体被修改成红色了。