专注WEB开发 分享经验,沉淀知识

phpstorm如何实现LESS自动生成CSS?

 作者:chenxing  时间:2016-11-01 18:29  阅读:1496  评论:

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

我之前开发less用的是Hbuilder 编辑器,对于less这个编辑器有一个好处就是能够自动编译less生成一个css文件,并不需要开发人员额外的进行配置。而phpstorm本身并没有自动这个功能,那么它如何实现?

可以分为两个方面配置。以我自己开发环境为例,我的电脑是win10系统(其他系统的朋友也可以做个参照)。

第一部分: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:--clean-css $FileName$,压缩css代码,如果不压缩就不用更改此项

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

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

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

less配置结果

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

题外话

虽然目的已达到,但想多扯几句。大家如果有心在安装过程中肯定会发觉一点,less安装是相对独立的并没有涉及到phpstorm工具的内容部分,也就是说LESS是安在node里而不是安在phpstorm里作为phpstorm的一个插件。既然这样LESS编译CSS其实是可以独立工作的,举一个例子通过命令行进行手动编译。

开启cmd 键入一下两个命令

cd C:\Program Files\nodejs\node_modules\npm\node_modules\.bin
lessc E:\Desktop\LESS\test.less > E:\Desktop\LESS\test.css

即可完成对test.less编译工作。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/19.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  88

PHP字符串转数组的三种场景

 2018-05-05 01:32  181

PHP如何遍历字符串?

 2018-05-04 00:56  913

api接口常见的安全问题和解决方案

 2018-05-03 23:20  811

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里