vs code中less的配置

简介

LESS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESS文件中的代码不能直接被浏览器解析渲染,需要在koala等软件中编译后,才能生成对应的文件和css代码,然后浏览器解析它。

流程

1.安装node.js(less需要有node.js支持,安装很简单)

2.在vs code中安装Easy less插件
在这里插入图片描述
3.在设置中找到settings.json
先找到vs code的左下角的齿轮,然后在找到里面的设置
在这里插入图片描述
在点击文本编辑器,在里面找到Code Actions On Save中的在settings.json中编辑
在这里插入图片描述
3.在settings.json中进行配置
打开settings.json里面的内容每个人是不一样的
在这里插入图片描述
然后在把下面的代码放入settings.json

 "less.compile": {
    "compress": false, // true => remove surplus whitespace 是否删除多余空白字符
    "sourceMap": false, // true => generate source maps (.css.map files) 是否创建文件目录树,true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录,后面路径自行配置。 less和css文件之间的对应关系
    "out": true, // false => DON'T output .css files (overridable per-file, see below) 是否编译输出文件
    //"outExt":".wxss",//输出文件的后缀,默认为.css 小程序中也是用less
}

在这里插入图片描述
完成以上操作后,编译保存Less时,就会生成css文件了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值