Automatically compile less output CSS and Sourcemap with Webstorm

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.