美图欣赏 | 设为首页 | 加入收藏 | 网站地图

当前位置:新锦江平台:www.xjj7.com-电脑中国 > 电脑技巧 > 软件技巧 >

在 WebStorm/PhpStorm 中开启对 Compass 的支持

2020-12-04 09:40|来源:未知 |作者:dnzg |点击:
  在最新的WebStorm/PhpStorm6更新中,加入了一系列优秀的前端开发工具。其中的FileWatchers功能可以自动编译诸如Sass、SCSS、LESS、CoffeeScript和TypeScript等预处理器语言。对我来说这是一个非常实用的扩展功能,通过它已经可以替代过去CodeKit所做的部分工作。但是FileWatchers目前还缺乏对Compass框架的支持,这对使用Sass/SCSS的开发者来说影响是非常大的。
 
  下面就说说如何配置WebStorm/PhpStorm,使其对Compass提供良好的支持。
 
  开启FileWatchers对Compass的支持
 
  安装Compass
 
  首先要确保系统已经安装了Compass(需要Ruby环境)。如果「终端」中不存在compass指令则说明Compass还未安装,需要执行下面的命令:
 
  $geminstallcompass
 
  在FileWatchers中添加Compass配置文件
 
  在WebStorm/PhpStorm设置里,找到项目设置中的「FileWatchers」。点击[+]添加配置。可以看到许多内置模板,根据需要选择SASS或SCSS。
 
  Compass配置文件
 
  具体配置如下:
 
  Filetype:SASSfiles或SCSSfiles
 
  Scope:ProjectFiles
 
  Program:bash(Win下可能是C:\Ruby\bin\compass.bat)
 
  Arguments:-login-c"compasscompile"
 
  Workingdirectory:$ProjectFileDir$
 
  Outputpaths:$FileNameWithoutExtension$.css或留空
 
  注意事项:
 
  如果遇到奇怪的编译错误,可以把「Arguments」设置为-login-c"compassclean&&compasscompile"。
 
  「Workingdirectory」必须指向带有Compass配置文件config.rb的路径。一般在项目根目录,使用$ProjectFileDir$即可。
 
  如果你想让输出文件与SCSS文件在不同的路径,比如SCSS文件在scss目录,输出的CSS文件在项目根目录,那么只要把「Outputpaths」设置为$ProjectFileDir$/$FileNameWithoutExtension$.css就可以了。其他结构可以根据后面的「Insertmacro...」自行设置;
 
  如果觉得自动编译太讨厌,可以把「Immediatefilessyncchronization」自动编译关掉。
 
  确认后保存设置。就可以通过Compass自动编译SCSS文件了。
 
  如何忽略指定文件的编译
 
  比起CodeKit,FileWatchers还缺少一个快速忽略指定文件编译的功能。你只能采用_filename.scss这样在文件名开头加下划线的方式来指定忽略编译这个文件。当然出于模块化考虑,这样的命名方式本身是有好处的。
 
  取消错误的语法检查
 
  WebStorm/PhpStorm默认的语法检查并不支持Compass语法,所以@import"compass";会被错误警告。
 
  解决方法:在「ProjectSettings-Inspection」里取消「SASS/SCSS」的「Cannotresolveimportintosass/scssfile」和「Unresolvedmixin」这两个选项就不会乱报错了。
 
  通过上面的设置,WebStorm/PhpStorm已经可以很好的对Compass进行支持了。我想大部分使用Sass/SCSS的前端工作者都在用Compass框架,也希望JetBrains早日加入原生支持。
(责任编辑:dnzg)