Automatically compile less output CSS and Sourcemap with Webstorm

What's the use of CSS output Sourcemap, maybe we have to ask this question.

Please come here.

Https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

In Chrome we can debug less source files directly via Sourcemap, which is a very powerful feature.

Let me give you a word.

1. Open the Dev tool in Chrome and open the Allow CSS source maps setting

As long as you create a file with less extension in 2.webstorm, you will be prompted to create a firewatchers task if you agree, but this default task will only compile the CSS. We need to make some minor changes to this task so that we can reach the output sourcemap.

Original Configuration

Post-Retrofit configuration

3. Arguments and output paths to refresh have been modified

Arguments

1	--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$

Output Paths to refresh

1	$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

　　

This will yield. css files can also produce. map files

The corresponding map file for the output is

1	{"version":3,"sources":["app.less"],"names":[],"mappings":"AAAG;EACF,YAAA;;AAEE;EACA,aAAA;;AAEE;EACJ,UAAA;EACA,eAAA;EACA,iBAAA"}

is not very good, after simple setup can be happy to develop!

4. The basis for modifying the command is

1	lessc app.less app.css --source-map=app.css.map

Environment

Webstorm	Less	Nodejs
7.0.3 (JS Best IDE non-AD)	1.5+ (this version only sourcemap)	Have to

Automatically compile less output CSS and Sourcemap with Webstorm