webstorm,PHPstorm,intelliJ idea之sass实时编译详解

jetbrain公司出的软件都很牛逼，是一个很牛叉的IDE，无论webstorm，还是phpstorm，还是intelliJ，

最近开始用SASS，LESS等来写CSS，jetbrain系列软件中，它自带一个File Watchers的plugin，设置一下，即可实时编译SASS，LESS等。

LESS的实时编译很简单，在node平台安装一下即可。

而在折腾SASS的实时编译时，花了我一点时间。因为按照网上的教程设置都不成功，最后自己把设置改来改去终于折腾好了。

下面就是在WebStorm设置SASS的File Watchers的步骤：

1. 安装Ruby

http://www.rubyinstaller.org/，去这里下载，然后安装。

2. 安装Sass

安装好Ruby后，打开CMD命令，输入：

gem install sass

注意：

这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

3. 上面都安装没问题以后，就可以设置Webstorm或PHPStorm了

• 3.1 打开Webstorm的设置界面，然后搜索File Watcher；

• 3.2 点击File Watchers界面的增加按钮；

• 3.3 然后设置界面如下：

注意：

• 如果你想用SCSS，并且Ruby是安装在默认路径下，那么”File Type:“和”Program：“那里的设置就和我一样；

• 如果是用SASS，那么你在新建时应该选择SASS的类型，”Program：“也应该选”sass.bat“。

ctrl + alt + s，打开'Settings'--'File Watchers'，然后双击'SCSS'：下面是默认的'SCSS File Watcher'

修改下面两个地方就可以一起生成'*.map'文件啦：

'Arguments': --no-cache --update $FileName$:$FileNameWithoutExtension$.css

修改后：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

另一处：

'Output paths to refresh': $FileNameWithoutExtension$.css

修改后：

'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

OK，修改完保存，现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'啦：

如果，想把SCSS源文件与生成后的CSS和map文件分开目录，则如下设置：

'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

转载本站文章《webstorm,PHPstorm,intelliJ idea之sass实时编译详解》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/sass/2015_0805_238.html