WebStorm、PHPStorm、IntelliJIDEA配置scss自动编译

一、安装rubu环境

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

1.下载ruby

因为sass依赖于ruby

下载地址&＃xff1a;http://rubyinstaller.org/downloads

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

2.安装ruby

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

二、安装sass

1.找到ruby命令行

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

2.安装sass

在命令行中输入以下命令&＃xff0c;并回车

gem install sass

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

至此&＃xff0c;准备工作完毕&＃xff01;

三、配置IDE

1.打开设置

打开IDE&＃xff0c;依次打开File→Settings→File Watchers

注&＃xff1a;IntelliJ IDEA中没有自带File Watchers插件&＃xff0c;需要自行从插件中心下载&＃xff08;这个应该都会&＃xff0c;实在有不会的请留言&＃xff09;

2.添加配置

点击右上角的绿色 “&＃43;” 号&＃xff0c;并选择scss&＃xff0c;如图

3.选择安装的sass

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

4.编辑输出路径

我的设置是在当前路径下生成css&＃xff0c;附上配置

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

5.完成设置

点击OK完成配置

使用注意

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

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