webstorm配置scss自动编译路径
来源:互联网 发布:爱名网域名过户 编辑:程序博客网 时间:2024/06/06 12:10
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
本文使用的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 scss 自动编译添加css3前缀
- 在webstorm中配置pug、scss的file watcher及编译路径
- 【scss编译】基于Webstorm File Watch的自动编译scss文件.md
- Sass/SCSS(关系,安装,webstorm配置编译,使用,语法)
- mac版本webstorm设置编译后的scss文件输出路径
- mac webstorm scss编译 添加监视
- WebStorm—scss转css配置
- less,webstorm 自动编译输出css配置
- win10下配置webstorm自动编译SASS
- Re:从零开始的实习生活01----webstorm和intellij idea下如何自动编译sass和scss文件
- webstrom配置scss编译环境
- webstorm入门5-sass、scss、less监听编译
- webstorm自动编译typescript
- WebStorm自动编译less
- sass环境搭建以及webstorm中的scss配置
- webStorm 之sass/scss
- less-webstorm 编译配置
- inet_pton 和 inet_ntop 等函数
- 三种基于感知哈希算法的相似图像检索技术
- linux服务器免密码登录实现
- HPUOJ1056题
- [勇者闯LeetCode] 121. Best Time to Buy and Sell Stock
- webstorm配置scss自动编译路径
- Ubuntu 16.10 禁用 Guest 访客模式
- Eclipse java web项目 ,导入IntelliJ IDEA 完整操作!
- SASS开发环境搭建(webstorm做编辑器)
- MySQL数据库·入门(复习)
- Python 3基础教程30-sys模块
- Android Handler机制完全解析
- 历届试题 小朋友排队
- RGB图像转为灰度图