用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了。
请移步这里
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN
在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能。
下面由我为大家道来
1.在chrome中开启dev工具,开启容许CSS source maps设置
2.webstorm中只要创建了less扩展名的文件,就会有提示只要你同意就会创建一个firewatchers任务,但是这个默认的任务只能编译出css。我们需要对这个任务进行一些小小的修改,以便能达到产出sourcemap。
原版配置
改造后的配置
3.对Arguments 和Output paths to refresh这两项进行了修改
Arguments
1
|
--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ |
Output paths to refresh
1
|
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map |
这样就能够既产出.css文件又能产出.map文件了
产出的对应的map文件为
1
|
{ "version" :3, "sources" :[ "app.less" ], "names" :[], "mappings" : "AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA" } |
是不是很棒呢,经过简单设置就可以快乐开发了!
4.修改命令的依据是
1
|
lessc app.less app.css --source-map=app.css.map |
环境
webstorm | less | nodejs |
7.0.3(js最好的IDE非广告) | 1.5+(这个版本才有sourcemap) | 必须 |
用webstorm自动编译less产出css和sourcemap的更多相关文章
- [less]用webstorm自动编译less产出css和sourcemap
css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...
- WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
1. 上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps” 及“Enable ...
- 使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GI ...
- webstorm自动压缩js、css、html【工具篇】
*注意:自动压缩的文件只能在同级目录下,不能指定文件夹,强制了文件自动保存,设置的手动保存将失效. 插件下载地址:点击这里下载 密码:e6bk 使用方法: 1.css&js 分别添加这两个,c ...
- webstorm自动编译typescript
http://bbs.egret.com/thread-1752-1-1.html http://bbs.egret.com/thread-1912-1-1.html
- webstorm 自动编译ts
1.在目录根目录添加tsconfig.json { "compileOnSave": false, "compilerOptions": { // 文件目录 & ...
- webstorm 设置 sass自动编译问题
sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller ...
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...
随机推荐
- javase基础回顾(二)LinkedList需要注意的知识点 阅读源码收获
我们在学习这一块内容时需要注意的一个问题是 集合中存放的依然是对象的引用而不是对象本身. List接口扩展了Collection并声明存储一系列元素的类集的特性.使用一个基于零的下标,元素可以通过它们 ...
- 浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
- Codeforce 水题报告
最近做了好多CF的题的说,很多cf的题都很有启发性觉得很有必要总结一下,再加上上次写题解因为太简单被老师骂了,所以这次决定总结一下,也发表一下停课一星期的感想= = Codeforces 261E M ...
- Spark 键值对RDD操作
键值对的RDD操作与基本RDD操作一样,只是操作的元素由基本类型改为二元组. 概述 键值对RDD是Spark操作中最常用的RDD,它是很多程序的构成要素,因为他们提供了并行操作各个键或跨界点重新进行数 ...
- 自行搭建私有云ownCloud,启用SSL,其他配置
ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...
- 不恰当的update语句使用主键和索引导致mysql死锁
背景知识: 截至目前,MySQL一共向用户提供了包括DBD.HEAP.ISAM.MERGE.MyIAS.InnoDB以及Gemeni这7种Mysql表类型.其中DBD.InnoDB属于事务安全类表,而 ...
- ASP.NET MVC4.0+ WebAPI+EasyUI+KnockOutJS快速开发框架 通用权限管理系统
1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性高.有利软件 ...
- 每天一个linux命令(48)--ln命令
ln是Linux中又一个非常重要的命令,它的功能是为某个文件在另外一个位置建立一个同步的链接,当我们需要在不同的目录,用到相同的文件时,我们不需要在每个需要的目录下都放一个相同的文件,我们只要在某个固 ...
- mfc---单文档工程添加消息响应
写消息映射:.h中些函数头文件afx_mag … .cpp中写函数体 .cpp中写消息映射 给toolbar添加消息: .h中添加头文件afx_msg …. .cpp中添加函数体,消息映射ON_COM ...
- nodejs中的异步流程序控制nsync
异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等 http://cnodejs.org/topi ...