Webstorm配置SASS环境

该文章由 leevare 发布于 ,归类于 Webstorm

首先官网下载RubyInstaller,运行安装。

注意选中add to path。

然后在cmd命令行执行

gem install sass

出现如下,说明安装成功。

查看sass版本号

sass -v

然后在Webstorm中的Settings->Tools->File Watchers点击右边的 + 选择SCSS打开如下设置

将之前安装的ruby中的scss.bat填写到Program栏目中。

保存退出即可。

当然这样还不够好,当scss文件发生改变时触发编译,Webstorm将scss和css文件放到了一个目录中。可以修改成如上图中webstorm中的配置,可以实现css和scss目录分离。

Arguments的值为:--no-cache --update --style expanded $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

释一下于默认配置参数值不同的地方:--style expanded 是为了改变 scss 文件输出的 css 代码风格,喜欢其他输出风格的同学也可以将 expanded 关键字改为其他的关键字。$FileParentDir$\css\ 是为了将编译的 css 文件输出到源 scss 文件所在文件夹的父文件夹的子文件夹 css 文件夹中,这样修改之后的目录结构如下:

如上图所示,scss文件夹下的 scss源文件产出的 css文件输出到了工程项目下的 css文件夹中。

注意: 像上面这样修改过参数值后,scss源文件一定要在项目文件夹下的单独一个文件中,不可直接置于项目根目录下。

修改 Output paths to refresh 参数的值为$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

避免默认配置将生成的 source map 与对应的 .scss 文件归为一组,使 css文件与 map文件同步输出到相同路径下。

去掉 Track only root files 的勾,否则编辑以下划线开头的 .scss 文件时,引用了这个文件的那些文件将不会被重新编译。这个看个人所需了。

相关文章:

说点什么

avatar
  Subscribe  
提醒