请在后台配置参数,参数名称:topads
前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

phpstorm实现LESS自动编绎生成CSS

CSS3 HTML我帮您 1年前  0次浏览
第一部分:LESS的安装

1.先安装node.js 下载安装包(注意适用平台)https://nodejs.org/en/ -> 点击安装(傻瓜式操作,点击next到底,注意安装nmp方式的node(一般在第二个位置,已安装好了没法截图))

2.测试一下是否成功安装了node;打开cmd命令窗口

node -v

npm -v

如果都成功返回版本号则表明安装成功。

3.less依赖环境有了,现在可以安装lessc模块了。很简单:

cd C:\Program Files\nodejs\node_modules\npm

npm install less

在cmd窗口依此键入以上两命令等待安装

4.安装css压缩插件less-plugin-clean-css

cd C:\Program Files\nodejs

npm install less-plugin-clean-css

在cmd窗口依此键入以上两命令等待安装(安装耗时长些,请耐心等待)

wind10用户需要注意, 安装的过程如果出现errno:-4048错误,这个时候你需要以管理员身份打开cmd (C:\Windows\System32\cmd.exe),重新3、4步骤。

第二部分:配置phpstorm

最新版本的phpstorm提供了file watcher 工具,可以在这里添加less和系统安装的less进行对接。

1.打开file watchers :File->Settings->Tools->File Watchers ,File Watchers窗口点击一个‘+’选择LESS,打开Less窗口。

2.配置LESS,如下图

less配置

3.参数说明:

Progame(程序):即执行LESS指令的程序路径,我安装的路径是:C:\Program Files\nodejs\node_modules\npm\node_modules.bin\lessc.cmd(每个人安装路径不一样要因人而异,反正找到lessc.cmd这个路径就行,如果安装上面的方式安装less可以肯定的是这个在nodejs目录里)

Arguments:--no-color $FileName$,压缩css代码,如果不压缩就不用更改此项

Working directory:在此目录中的less文件执行编译的,其他目录的LESS就不会自动编译。默认即可

Output paths to refresh:指定生成css文件的路径(生成的css你要搁在那个目录下或者重命名都可以在这里设置)。默认即可

4.测试结果:新建一个less文件,ctrl+s保存就会自动生成一个编译过的css文件

less配置结果

ok,到这里大家就能够用phpstorm开发LESS自动编译CSS,希望上面介绍能够切实的帮到大家。

发表评论