学习less，从这里开始！
原创学习less，从这里开始！
原创
Learn-anything.cn
发布于 2021-12-12 09:58:08
发布于 2021-12-12 09:58:08
一、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: npm2、编写 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 less3、运行项目
# 执行转换
npm run build完成后，项目根目录会产生 dist 文件夹，浏览器可打开 index.html 文件查看字体被修改成红色了。
三、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
