如何在vscode中配置less,并自定义css文件输出目录(超全面超详细)
1,安装easy less扩展。在vscode中安装easy less2、安装后–>点击“管理”–>“扩展设置”,点击easy less扩展右下角小齿轮(设置)3、选择“在setting.json中编辑”4、拉到底加入以下代码,生成css文件的目录根据需要更改,这里以css目录举例/**<<<<下面是less配置**/"less.compile": {"comp
·
目录
2、安装后–>点击“管理”–>“扩展设置”,点击easy less扩展右下角小齿轮(设置)
4、拉到底加入以下代码,生成css文件的目录根据需要更改,这里以css目录举例
6、在工作区项目文件中创建.less文件,并创建一个css文件夹(目录)
7、然后在.less写样式代码,保存,就会在css文件下自动生成一个对应的同名的.css文件,就可以在html中引入使用啦!
8, 如果想把.less文件和生成的.css文件放在一个目录中,那就改一下配置中输出目录 “out”的值改为 true就行了
1,安装easy less扩展。
在vscode中安装easy less
2、安装后–>点击“管理”–>“扩展设置”,点击easy less扩展右下角小齿轮(设置)
3、选择“在setting.json中编辑”
4、拉到底加入以下代码,生成css文件的目录根据需要更改,这里以css目录举例
/**<<<<下面是less配置**/
"less.compile": {
"compress": true, // 是否删除多余空白字符
"sourceMap": false, // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件
"out": "${workspaceRoot}\\css\\", // 输出文件目录 这里为css文件夹
"outExt": ".css", // 输出文件的后缀,默认为.css 如果是微信小程序后缀为.wxss
}
/**上面是less配置>>>>**/
注意:第三行代码输出文件目录, 这里是双斜杆
5、然后重启vscode
6、在工作区项目文件中创建.less文件,并创建一个css文件夹(目录)
7、然后在.less写样式代码,保存,就会在css文件下自动生成一个对应的同名的.css文件,就可以在html中引入使用啦!
8, 如果想把.less文件和生成的.css文件放在一个目录中,那就改一下配置中输出目录 “out”的值改为 true就行了
这里以css目录为例
(1)把.less文件放在css文件夹中
(2)设置配置中的 out 值为 true
注意:这里不是字符串“true”,而是true
(3).less文件保存后的效果
喜欢的朋友给个赞吧!
更多推荐
已为社区贡献9条内容
所有评论(0)