关于webStorm设置less自动编译css和sourcemap问题
来源:互联网 发布:win to go mac 的坏处 编辑:程序博客网 时间:2024/05/06 17:26
前两天项目页面迭代版本,接手同事的页面(据说是经了三人的手...),css中内容已经惨不忍睹,忍着痛苦算是完成了css效果。痛定思痛,以后写代码一定要用less,维护起来不会这么惨。问一个朋友,他是用考拉进行自动编译,本人比较懒,不想使用那么多工具,于是百度了一下关于webStorm的自动编译less文件,还真有,但是在less文件下创建的css和map,于是又查阅怎么能创建到根目录下的css文件夹中,经过个人测试修改,把webStorm配置记录一下,以备以后忘了。
1.设置Chrome浏览器的开发者模式,网上说是在Setting-General下,找了半天也没找到General这货(我严重怀疑自己电脑有问题,PS功能报错,Chrome也各种不好用),结果在F12-右上角-大概中间位置
2. npm install less -g 全局安装less。由于我是以前安装的,这次忽略了这个步骤,参考别的资料才发现有这么一步。
3. 配置 webStorm :File-setting-Tools-File Watchers-右上角添加Less的设置。如图:
----
回弹出这个窗口,Program打开就是这个路径,我猜应该是自动匹配的到lessc命令,如果不是,那就手动配置一下吧;主要是Arguments和Output paths to refresh,
Arguments:--no-color --source-map=$FileParentDir$/css/$FileNameWithoutExtension$.css.map $FileName$
Output paths to refresh:$FileParentDir$\css\$FileNameWithoutExtension$.css: $FileParentDir$\css\$FileNameWithoutExtension$.css.map
保存,然后创建一个Less文件夹,写一个less文件,自动生成了css文件夹及对应css和map。
最后,复制要给别人的sass配置,等以后需要sass的时候再试试能用不~
sass的配置方法也是一样,它生成css和map的命令行参数如下:sass bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache
在Arguments 中的参数如下
--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
- 关于webStorm设置less自动编译css和sourcemap问题
- 支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件
- less,webstorm 自动编译输出css配置
- WebStorm自动编译less
- webstorm下搭建编译less环境 以及设置压缩css
- webstorm设置sass自动编译
- less-webstorm 编译配置
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
- Ubuntu 下配置 PhpStorm 自动编译 LESS 生成css和source-map
- 在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- less css编译
- css>less编译
- webstorm自动编译typescript
- Hbuilder less自动编译
- webstorm 下载并设置jade、less
- Webstorm 设置 自动换行
- compass 编译 sourcemap 配置
- 全卷积神经网络 图像语义分割实验:FCN数据集制作,网络模型定义,网络训练(提供数据集和模型文件,以供参考)
- http反向代理和转发代理
- for循环中ArrayLis嵌套用ArrayList的一些坑
- -bash: ./startup.sh: Permission denied解决
- Android100【申明:来源于网络】
- 关于webStorm设置less自动编译css和sourcemap问题
- js中的JSON操作
- Excel字符串替换(replace)
- android四种对话框
- linux svn 多项目设置
- linux-1-Linux一些开发运维常用命令
- VMware推出业界首款云操作系统 提供“IT即服务”
- 使用HTML5 Canvas创建动态粒子网格动画
- iOS--The file “XXX.app” couldn’t be opened because you don’t have permission to view it.