webstorm运行less文件

在编写css代码时,使用less能提高我们编程得效率。
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
那么如何在webstorm上使用less且能够自动生成更新css代码呢?我记录一下
第一步:安装koala软件
koala这个由国人编写的,用于编译sass、less、coffee利器,在最近的短短几个月曝光率不亚 于任何其他的技术。

网盘链接:https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw
提取码:cnbn
安装:

一直next就好了
第二步:新建一个less文件,写入代码


第三步,打开koala,点击+号,选择less所在文件目录

点击想要转换得less文件,注:右边要勾选autoprefix选项,不然css文件无法与less文件自动同步

如果有css文件夹,less转化时css文件的位置默认在css目录下,没有的话跟less文件同一目录
生成css文件
最后,在HTML代码里导入less转换得css文件,再运行

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

工作到这里就完成了。

原文地址:https://www.cnblogs.com/xyyl/p/11000404.html