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

2016-12-17 12:03:57来源:oschina作者:Edik人点击


一、安装rubu环境

本文转自:https://www.edik.cn/article/61.html


1.下载ruby

因为sass依赖于ruby


下载地址:http://rubyinstaller.org/downloads


选择自己对应的操作系统下载


2.安装ruby

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



二、安装sass
1.找到ruby命令行

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



2.安装sass

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


gem install sass

稍等片刻便会提示安装成功。如果不成功说明被墙了,请自行解决,反正我的正常安装了。


至此,准备工作完毕!


三、配置IDE
1.打开设置

打开IDE,依次打开File→Settings→FileWatchers


注:IntelliJ IDEA中没有自带FileWatchers插件,需要自行从插件中心下载(这个应该都会,实在有不会的请留言)


2.添加配置

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



3.选择安装的sass

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



4.编辑输出路径

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


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


5.完成设置

点击OK完成配置

使用注意

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

2.目录名或文件名不要带中文

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台