VScode实现Less自动编译

本文将介绍怎样在VScode中通过Easy Less 插件自动编译我们的less(当我们的文件修改后保存时自动编译)

下面将介绍怎样在VSCode中实现Less自动编译。

第一步:从 vscode 商店中下载 Easy Less插件。如下图:

注意:从上图可知,Easy LESS的下载次数很多的,评分也不错。

第二步:配置 settings.json 文件(文件 -> 首选项 -> 设置 - 搜索设置settings.json)。如下图:

点击上图的“在 settings.json 中编辑”连接。去配置 Easy Less,如下图:

上面配置信息“less.compile”配置了当我们保存less文件后,自动编译less文件。其中:

  • compress 表示移除less中多余的空格,即生成压缩生成的css;

  • sourceMap 表示是否生成map文件;

  • out 表示生成的css文件输出到什么地方;

实例:配置将CSS输出到项目根目录下面的css目录下面;将编译后的css文件输出到当前目录。

{ //settings.json
    ...
    "less.compile": {
        // 输出到指定的目录
        "out": "${workspaceRoot}\\css\\" 
        // 输出到当前目录,文件名称为"less文件名称.css"
        "out": ".\\"
    }
}

注意:${workspaceRoot} 代表当前项目的根目录,后面路径自行配置。

更多关于Easy LESS的用法,可以查看VSCode应用商店对插件的介绍(文档是英文的)。


阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
1 不喜欢
热门推荐
全套5册塔木德正版大全集思考致富洛克菲勒38封信巴菲特稻盛...

趁着优惠,赶紧入手,是正品,包装也非常的好,没有破损,质量也是没得说,棒?,已经差不多看完了,书本质量很好,没有异味,值得推荐购买!!!

正版12册 鬼谷子书籍 卡耐基人性的弱点墨菲定律羊皮卷狼道羊

正版12册 鬼谷子书籍 卡耐基人性的弱点墨菲定律羊皮卷狼道羊皮卷书口才三绝为人三会修心三不管人三心理学书籍励志书籍将来的你一定感谢现在拼命的自己赢了自己就赢了世界

说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号