1. 博客
  2. WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译

WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译

使WebStorm、PHPStorm、IntelliJ IDEA支持scss的同步编译,也就是即写即编译,并且可以指定编译后的css的目录。

安装rubu环境

下载ruby

因为sass依赖于ruby
下载地址:http://rubyinstaller.org/downloads
选择自己对应的操作系统下载

安装ruby

第二步的时候注意勾选第二项,是添加环境变量,后边都选择默认即可安装完毕。

安装sass

找到ruby命令行

从开始菜单中找到刚安装的ruby,点击Start Command Prompt with Ruby,打开命令行

安装sass

在命令行中输入以下命令,并回车

gem install sass

稍等片刻便会提示安装成功。如果不成功说明被墙了,请自行解决,反正我的正常安装了。
至此,准备工作完毕!

配置IDE

打开设置

打开IDE,依次打开File→Settings→File Watchers
注:IntelliJ IDEA中没有自带File Watchers插件,需要自行从插件中心下载

添加配置

点击右上角的绿色 “+” 号,并选择scss,如图

选择安装的sass

如图所示是sass的默认安装路径

编辑输出路径

我的设置是在当前路径下生成css,附上配置

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

完成设置

点击OK完成配置

使用注意

1.同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目,随便打开一个项目外的文件是不行的 2.目录名或文件名不要带中文

文章标题:WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译

文章链接:http://www.edik.cn/article/61

转载请务必注明出处,欢迎分享

目录