WebStorm使用less

参考：使用less  http://less.bootcss.com/#using-less

1. 安装Node.js  (下载地址：https://nodejs.org/ )

记下安装路径，如   D:Program Filesnodejs

2. 打开命令行工具cmd，进入nodejs安装目录，输入命令：

      d: 

回车，再输入命令：

     cd  D:Program Filesnodejs

回车，如图：

3.使用node来安装less，输入命令：

    npm install -g less

 回车安装less，安装会提示安装路径，记下该路径

这里是默认的：C:UsersAdministratorAppDataRoamingnpmnode_moduleslessbinlessc

4.此时我们可以直接编译一个less文件成css文件了，如现在编译 D:mydatastyle1.less文件，起名为style1.css文件，仍然放在D:mydata文件夹下，命令：

  lessc D:mydatastyle1.less > D:mydatastyle1.css

如需编译压缩的css文件，加上命令提示 -x

 lessc -x D:mydatastyle1.less > D:mydatastyle3.css

5.配置webStrom的less设置

  启动webStrom,进入 文件（File）-设置（Settings），在“IDE Settings”里面找到 外部工具（External Tools），

点击“+”，如图填写“Name”和“Group”，在“Tool settings”里面有三个项目需要填写。

“Program”是“node.exe”的实际路径，这里我填写上面的：D:Program Filesnodejsnode.exe

“Parameters”是less的安装目录，这里填上面记录的再加上 $FilePath$,如下：

C:UsersAdministratorAppDataRoamingnpmnode_moduleslessbinlessc $FilePath$

“Working directory”就是nodejs的安装目录，这里填写：D:Program Filesnodejs

然后点击OK，确定即可。

6.下面新建一个.less文件，在初次打开less文件的时候，在编辑界面的右上方会出现一个“Add watcher”链接，这里点击进去，确定即可

7.然后当编辑less文件的时候，发现下面就自动带有编译好的同名.css文件了，如下：

写样式的时候，写在less里，方便好维护，但是页面引用的时候，还是推荐引用编译生成的css文件

也可以在less文件上，点击右键，在弹出菜单中选择“LESS”-“CSS”进行编译到css文件:

8.可以为这个编译器指定一个快捷键，我使用的是ALT + B

转载于:https://www.cnblogs.com/Vayne-N/p/6625655.html