在idea中使用scss,并实时编译生成css文件
近来写项目多用idea,本人写样式超级依赖scss,没有它修改样式的时候很痛苦。在vscode和idea中切来切去,感觉有点麻烦。于是选择在idea中配置好scss.
首先安装ruby
我的电脑是64位,安装的是下面这个
安装过程中,一定要勾选这一项,其他直接next。
安装完成后在命令行输入
ruby -v
检查是否安装成功,出现版本号,就是安装成功了。
ruby安装成功后,安装compass,命令行输入
gem install compass
(这个安装的时候有点慢,需要稍等一两分钟)
然后compass -v检查是否安装成功以及版本信息
安装normalize,命令行输入
gem install compass-normalize
安装sass,命令行输入
gem install sass
然后sass -v 检查是否安装成功以及版本信息
然后在idea中安装插件File Watcher
接下来就是设置
其中:
Program选择步骤3中Ruby路径中,bin目录下的scss.bat文件。
Argument部分选择: --no-cache --update --watch $FileDir$
Output paths to refresh选择: $FileDir$:$FileNameWithoutExtension$.css
这三个参数不是一定需要这么写,因为$ $之间带不同的参数表示不同的意思。如果啊,我是说如果,你真的不想去理解$里面不同参数代表的意思,你用绝对路径也是能办到的。。当然这种就只能用在你这一个project中了。
这个是官方的new watchers的文档,里面都有记录,有兴趣的了解了解
https://www.jetbrains.com/help/idea/2020.2/new-watcher-dialog.html。
结束语:
经过这两天的运用吧,我觉得在idea中用scss真的不如我在VScode中使用,体验感没有vscode好,再加上在idea中我还要提交项目,scss编译后的css文件又在scss的子目录(这个应该可以设置)。总之觉得我不如用VScode。又是一次试错体验。