其实在WebStorm中,是支持Sass,Compass自动编译的,只是需要简单设置下就能用,完全没必要每次都开命令行监听(本文不赘述如何安装)。
先用compass create
命令创建一个项目(如果事先没创建好文件夹可以在命令后面带上项目名,例如compass create project1
)
E:\WWW\Compass-demo>compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
write stylesheets/ie.css
write stylesheets/print.css
write stylesheets/screen.css
*********************************************************************
生成后的文件目录如下:
│ config.rb
│
├─.idea
│ │ Compass-demo.iml
│ │ misc.xml
│ │ modules.xml
│ │ workspace.xml
│ │
│ └─inspectionProfiles
├─.sass-cache
│ ├─04fa65445a4c180b6c644137eba5fd642a21e800
│ │ _reset.scssc
│ │
│ ├─c7e900fc6f3d4df58787a63726e136246b350863
│ │ ie.scssc
│ │ print.scssc
│ │ screen.scssc
│ │
│ └─fb3fa0e83bcf1ff9d27e4212f069263213ca42c2
│ _utilities.scssc
│
├─sass
│ ie.scss
│ print.scss
│ screen.scss
│
└─stylesheets
ie.css
print.css
screen.css
打开sass目录下的任意一个文件WebStorm便会提醒我们设置Sass、Compass自动编译。我们点击右上角的“Yes”,先来设置一下Sass的自动编译。
默认通过Ruby安装好Sass的情况下,我们什么都不需要修改,直接点“OK”即可(Node.js版的Sass需要手动调整下参数,否则无法编译)。
随便新建个文件,测试完美编译。
但目前引入了compass的sass文件还无法编译(因为sass编译器无法识别compass框架带来的@import "compass/xxx";
语法,所以引入了compass的东西必须由compass的编译器去编译),我们继续设置Compass的自动编译。
cmd.exe /D /C call C:\Ruby25-x64\bin\scss.bat --no-cache --update screen.scss:screen.css
error screen.scss (Line 6: File to import not found or unreadable: compass/reset.)
Process finished with exit code 1
我们直接按“Alt + Enter”之后勾选“Enable Compass support”,之后WebStorm会帮我们自动设置好路径,点“OK”即可。
此时只是启用了Compass的支持,还不能自动编译引用了Compass的sass文件,还需要配置“File Watcher”,才能实时监听引入了Compass的sass文件并自动调用compass完成编译。
默认在通过Ruby安装的Compass的情况下,直接点“OK”就行。
之后测试编译screen.scss,完美编译。
至于WebStorm中的这个报错,忽略就好,也可以去“File Watcher”,找到SCSS、Compass SCSS,把“Show console”选项改为“Never”。
cmd.exe /D /C call C:\Ruby25-x64\bin\scss.bat --no-cache --update screen.scss:screen.css
error screen.scss (Line 6: File to import not found or unreadable: compass/reset.)
Process finished with exit code 1