WebStorm使用less

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

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

记下安装路径,如   D:\Program Files\nodejs

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

      d: 

回车,再输入命令:

     cd  D:\Program Files\nodejs

回车,如图:


3.使用node来安装less,输入命令:

    npm install -g less

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

这里是默认的:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc

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

  lessc D:\mydata\style1.less > D:\mydata\style1.css

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

 lessc -x D:\mydata\style1.less > D:\mydata\style3.css

5.配置webStrom的less设置

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

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


“Program”是“node.exe”的实际路径,这里我填写上面的:D:\Program Files\nodejs\node.exe

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

C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$

“Working directory”就是nodejs的安装目录,这里填写:D:\Program Files\nodejs

然后点击OK,确定即可。

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


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


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

<link rel="stylesheet" href="css/style1.css">


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



  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值