学习less,从这里开始!
2023-04-18 14:43:22 时间
一、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 文件查看字体被修改成红色了。
三、参考文档
相关文章
- EasyCVR对接华为iVS订阅摄像机和用户变更请求接口介绍
- 精选 | 腾讯云CDN内容加速场景有哪些?
- 模块化网络防止基于模型的多任务强化学习中的灾难性干扰
- 用搜索和注意力学习稳健的调度方法
- 用于多变量时间序列异常检测的学习图神经网络
- 助力政企自动化自然生长,华为WeAutomate RPA是怎么做到的?
- 使用腾讯轻量云搭建Fiora聊天室
- TSRC安全测试规范
- 云计算“功守道”
- 助力成本优化,腾讯全场景在离线混部系统Caelus正式开源
- Flink 利器:开源平台 StreamX 简介
- 腾讯云实践 | 一图揭秘腾讯碳中和?解决方案
- 深度学习中的轻量级网络架构总结与代码实现
- 信息系统项目管理师(高项复习笔记三)
- Adobe国际认证让科技赋能时尚
- c++该怎么学习(面试吃土记)
- 面试官问发布订阅模式是在问什么?
- 面试官:请实现一个通用函数把 callback 转成 promise
- 空中悬停、翻滚转身、成功着陆,我用强化学习「回收」了SpaceX的火箭
- 中山大学林倞解读视觉语义理解新趋势:从表达学习到知识及因果融合