WebStorm配置less
一、介绍
Less是一种动态样式语言,属于css预处理语言的一种。它使用类似CSS的语法为CSS的赋予了动态的特性,如变量、继承、运算、函数等,更方便css的编写和维护实现css模块化。less 可以在多种语言,环境中使用,包括浏览器端、桌面客户端、服务端。
通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等
官网中文手册:https://less.bootcss.com/
二、安装less
1.部署node.js环境
官网:https://nodejs.org/en/download/
安装过程略,直接下一步下一步即可。
2.安装Less
win+R cmd进入shell,CD切入倒安装目录,默认为C:\Program Files\nodejs
cd C:\Program Files\nodejs
npm install -g less
3.打开webstorm
WebStorm左上角---->files---->Settings---->Tools---->File Watchers----->点击添加
4.新建less文件验证
选择txt文件,随后手动添加后缀名。
三、修改导出CSS路径
复制下列内容
$FileName$
$FileParentDir$\css\$FileNameWithoutExtension$.css
--source-map
粘贴到此处
注:
$FileParentDir(less)$ 是获取 less 目录的路径
$FileDirPathFromParent(less)$ 是获取 less 文件到 less 目录的路径
$FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字