(1)作用:帮助webpack打包scss文件;
(2)处理流程:scss-loader是将scss格式的样式,先帮我们转换成css格式的样式,再交给css-loader根据各个文件的依赖关系整合成一段css,最后再交给style-loader帮我们挂载到页面的header部分;
二、安装:使用sass-loader需要安装两个依赖:sass-loader和node-sass
注意: node-sass可能由于翻墙的 原因安装失败,我们可以使用cnpm安装
三、sass-loader的配置:
由于sass-loader始终都是帮我们处理样式文件的,只不过是将scss语法的样式转换成css语法的样式,因此,sass-loader是和样式处理loader在一起的;
本文前提 是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;
本文使用的webstorm为11.0版本
点击左上角的 *File→Settings→File Watchers ***
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作:
其中黄色的地方都要填好,program那里是你安装ruby中响应的scss.bat的路径,如果安装ruby时,你不是按照默认c盘路径按装的话,那么那里是需要需改的;
按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的 :
1、Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css
注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.
举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.
如图所示:
2、 Output paths to refresh:
改成这样: .css: .css.map
经过以上配置就实现了, webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
这里需要注意两点:
1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561
vscode只是编辑器,不具备这种读取并编译的功能(可以使用在nodeJS使用的sass插件实现),不过vscode
可以把正在编辑的scss文件在保存的时候编译成css。在找到插件之前你可能需要:
建议还是看看sass或者scss的官方文档,到底什么能编译出来(已收货14踩!)。