webstorm下SCSS自动生成文件配置
第一步:安装ruby环境并使用gem install sass 安装sass(国内访问较慢),如果安装不成功可以更换源路径
更换方式:
gem sources --remove https://rubygems.org/
gem source -a http://ruby.taobao.org
gem install sass
或者更换成:
gem sources -a http://gems.ruby-china.org
第二步:在WebStrom编辑器中选择File->Settings->File Watchers添加SCSS配置项
第三步:修改下面两个地方:
'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
另一处:'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
修改完保存,现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'
碰到的问题以及解决方法:
问题1:如果想把SCSS源文件与生成后的CSS和map文件分开目录,则如下设置:
'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
问题2:如果编译不了,并出现乱码问题:
找到ruby的安装目录并找到sass模块,修改文件目录下的 (C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass )
engine.rb这个文件,在所有的require XXXX 之后添加Encoding.default_external = Encoding.find('utf-8')即可 。
问题3:默认生成的csss是nested模式的,如果想换成其他模式(expanded、compact、compressed)怎么换?
Arguments:--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css --style compact
几种模式效果如图所示:
(本文来自网络)