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

建站经验 2021-06-19 下载铺
加入收藏

一、安装rubu环境

1.下载ruby

因为sass依赖于ruby

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

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

2.安装ruby

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

WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译(图1)


安装ruby

二、安装sass

1.找到ruby命令行

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

WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译(图2)


2.安装sass和compass

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

gem sources --remove https://rubygems.org/
gem  sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem install sass
gem install compass

稍等片刻便会提示安装成功。

至此,准备工作完毕!

三、配置IDE

1.打开设置

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

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

2.添加配置

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

WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译(图3)

添加配置

3.选择安装的sass

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

WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译(图4)

sass安装路径

4.编辑输出路径配置

    1.设置在当前路径下生成css

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


    2.带有scss定位的目录,方便前台调试

--no-cache
--update
--style
compressed
$FileName$:../stylesheet/$FileNameWithoutExtension$.css



WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译(图5)

5.完成设置

点击OK完成配置

使用注意

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

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


版权声明: 本文由下载铺 2021-06-19 转载于互联网,如侵犯了您的权益,请于本站联系!

文章地址: WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译 | 下载铺


金口玉言

*必填

您好,访客!有什么新鲜事想告诉大家?

发表
暂时还没评论,等你发挥!