Webstorm配置Sass,Scss

1. 前提条件：

    电脑已经完成Ruby，Sass，Compass的安装 。

 2.配置   

    打开webstorm ---- settings ---- Tools ---- files Watchers  ---- 点击加号，选择scss / sass

    然后按照下图进行操作：

    1、Program :

        Ruby安装目录下 ---- bin ---- scss.bat / sass.bat文件路径

    2、Argument ：

        可以配置编译后的文件的输出路径。

        相关配置(举例两种)：

       1.    --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

            举个例子,比如说我有一个test项目,test项目下有一个scss/sass文件,按照这样配置的结果就是，编译后的css文件就在scss/sass文件下

        2. --no-cache --update --sourcemap --watch     $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

            举个例子，比如说我有一个test项目,test项目下有一个scss/sass文件夹,该文件夹下存放的就是scss/sass文件。那么按照这样配置的结果就是，scss/sass文件所在的文件夹就是scss/sass,scss/sass文件夹的父级文件夹就是test,然后找到test项目里面的css文件夹,编译后的css文件就存放在此目录下

          注意：$FileName$后面有个冒号。 $FileParentDir$  表示scss/sass文件所在的文件夹的父级文件夹，而不是scss/sass的父文件夹

          

  3、Output paths to refresh:   

        相关配置：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

  经过以上的配置就可以实现实时编译了

注意点：

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

    2.  Sass/Scss编译不能带有中文，无论是路径名，文件名，还是文件里的内容，都无法识别中文。如果要修改文件名也不是不可以的,建议文件名尽量使用英文。    

3.webstorm中Scss/Sass编译时目录或内容包含中文字符报错。

   1、 解决目录带带中文问题

         Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8

    

   打开 --trace

    

出现如下提示信息:filesystem.rb:87:index

找到D:/IDE/Ruby/Install/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/importers/filesystem.rb的87行

添加encode("utf-8","gbk")

2、如果Scss/Sass文件中内容带中文会报错，就给Scss/Sass文件的第一行添加@charset "utf-8"

4.编译风格的设置

    提供了四种编译风格：    

            nested : 嵌套缩进的CSS代码，为默认值。

            expanded ： 没有缩进、扩展的CSS代码。

            compact : 简洁格式的CSS代码。

            compressed : 压缩后的CSS代码。

    更换编译风格：

            在Arguments配置的末尾添加 --style 编译风格

            如: --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css --trace  --style compressed

    将编译风格设置完毕后,要使用哪种就勾选哪种