How to generate sourceMap file for css or scss?-CodePudding

Can't find out the way to make source map for css. Can anybody give a hint?

CodePudding user response：

Most compilers for SASS/LESS will make a sourceMap for you while compiling your code. If they didn't it's probably a setting.

You can read some more here https://cssdeck.com/blog/how-to-create-css-map-file/

CodePudding user response：

So, there are a few ways to generate fileName.css.map or fileName.scss.map or anything you want.

First create a file optionalName.css.

1) Install sass: npm install -g sass.

The pattern looks like this: sass input.css output.css.

Then go to your terminal and type sass optionalName.css optionalName.css.

Sometimes you need to specify path to your file like:

sass src/css/example.css src/css/example.css

And you see optionalName.css.map file is generated in your folder.

You can also convert scss to css by running sass optionalName.scss:optionalName.css.

2) Go to VS Code and install Live Sass Compiler extension. When it's installed you'll see a Watch Sass button in the blue bar below. Just open a SCSS file you need, say, styles.scss, and press the Watch Sass button. Right after that all necessary files are generated in your folder:

styles.css
styles.css.map
styles.scss