VSCode 配置并使用less

在VsCode中使用Less方法:

  1. 安装node.js (这是基本操作了。LESS需要有node.js支持,安装node.js略过)
  2. 在VSCode中。搜索插件 Easy LESS。安装,安装完后最好重启一次VSCode
  3. 普通的使用需求都可以满足了。在需要生成css文件的地方,新建一个.less文件。如图:
    这里写图片描述
  4. 在里面写你需要的样式,保存后,会自动在同级目录下,生成同样名称的css文件
  5. 至此,普通版的Less配置就完成了

进阶版:在截图中,我通常用于小程序开发,如果只是生成.css文件不能满足日常的需求,所以可以通过修改配置文件,来实现我们想要的效果

先生成一个.vscode。用来存放配置文件的。至于生成的方法很多,我是随便按了下F5。启动调试,虽然启动调试失败了,可是会自动生成这个文件

.vscode文件夹中,添加一个配置文件名称:settings.json
内容如下:

{
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树,true的话会自动生成一个 .css.map 文件
        "out": false, // 是否输出css文件,false为不输出
        "outExt": ".wxss", // 输出文件的后缀,默认为.css
    }
}

这里我只是实现了一些简单的配置,详细的配置可以看vscode插件的介绍来配置。
至此,小程序调试也可以使用less了

猜你喜欢

转载自blog.csdn.net/Jioho_chen/article/details/82465607