webstorm配置scss自动编译路径
2017-05-06 23:19
1431 查看
本文使用的webstorm为8.0版本
scss安装:http://www.w3cplus.com/sassguide/install.html
打开webstorm:
点击左上角的
File→
Settings→
File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
-------------------------------------------------------------------------------
Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
注意,
$FileName$后面有个冒号,然后
$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.
举个栗子,我的项目叫
sass-learn,里面有个scss文件夹,里面存放scss文件,那么按照这样配置的结果,style.scss所在的文件夹就是scss,scss的父文件夹就是sass-learn,然后找到sass-learn下的css文件夹,编译后的style.css文件就会在这里.
---------------------------------------------------------------------------------
Output paths to refresh:
改成这样:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
在使用的过程中还有两点需要注意:
1.同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2.这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
相关文章推荐
- webstorm配置scss自动编译路径
- 在webstorm中配置pug、scss的file watcher及编译路径
- WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
- Sass/SCSS(关系,安装,webstorm配置编译,使用,语法)
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录
- webstorm设置sass自动编译,及参数配置
- webstorm scss编译css配置
- Pycharm WebStorm 配置 babel 实现自动编译 ECMAScript6 (es6) 文件
- Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件
- webstorm配置scss的编译和遇到的坑
- 【scss编译】基于Webstorm File Watch的自动编译scss文件.md
- 交叉编译时候如何配置连接库的搜索路径
- 在Eclipse中配置NDK自动编译环境builders
- webstorm上安装自动编译less文件的插件的步骤
- Android编译环境路径配置
- 交叉编译时候如何配置连接库的搜索路径
- eclipse 配置spring IDE详解(配置好以后可以查看bean的依赖关系,很清晰。而且在xml中写bean的时候可以自动提示引用类路径等)
- 在.bashrc文件中配置交叉编译工具链和JDK路径
- Windows/Ubuntu 在Eclipse中配置NDK自动编译环境builders
- Java API 自带的日志管理,可配置文件路径,并自动创建不存在的目录