Support for new chrome, compile CSS and sourcemap with Webstorm, debug sass and less source files

The older version of Chrome has a support for sass, but the new Chrome doesn't have this feature. See online offers more methods, also very messy, the old version of the new versions are. And you can't specify the path you want.

So I made the next revision.

Sass and less have provided a map file, what is this file for?

The. Map file is a JSON-formatted file that can be debugged directly from the Less/sass source file.

========================================================

First less configuration (the Sass configuration is basically the same as not, only the operating parameters are not the same)

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

If you create a file with less extension in 2.webstorm, you will be prompted to create a Files watchers 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.

The original configuration

3. Modified Configuration

Main changes arguments

Arguments

$FileName $ $FileParentDir $\css\ $FileNameWithoutExtension $.css--source-map

CSS and map files generated in the specified CSS directory

4. The catalogue is as follows

5. In fact, just understand less's command, set the correct path in arguments, do not configure output paths to refresh can also achieve the same effect.

LESSC bootstrap.less. /css/bootstrap.css--source-map

The same is true of the 6.sass configuration method

It generates CSS and map command-line parameters as follows:

Sass Bootstrap.scss:.. /css/bootstrap.css--sourcemap--no-cache

in the The parameters in Arguments are as follows

--no-cache--sourcemap $FileName $: $FileParentDir $\css\ $FileNameWithoutExtension $.css

7. In HTML, add the CSS file

<link rel= "stylesheet" href= ". /themes/css/bootstrap.css ">

Can actually open the CSS file to see, the last line has a

/*# Sourcemappingurl=bootstrap.css.map */

Referenced. map File:

In order to facilitate debugging, the. Map and CSS are generated in the same directory.

When you open the page access, click Style

8.LiveStyle

The chrome plugin Livestyle can be used in conjunction with the sublime TEXT3 editor to implement a synchronous CSS update without refreshes. The effect is also good, can learn from.

But still like sass/less combined with Webstorm debugging mode.

================

9. New Compass Configuration

The parameters in arguments are as follows

Compileoutput Paths to Refresh$filenamewithoutextension$.css

The CONFIG.RB is configured as follows.

Http_path = "/" Css_dir = "css" Sass_dir = "sass" Images_dir = "Images" Javascripts_dir = "JavaScripts"

The directory structure is as follows

Reprinted from: http://blog.csdn.net/ylh644894056/article/details/25924171

Support the new version of Chrome, build CSS and Sourcemap with Webstorm, debug sass and less source files (go)