{

How to disable source map CSS files in sass? | no-source-map example


SASS is an preprocessor which compiles into sass files and output .css and .css.map files. CSS map helps developers to debug these files.

In Production, These files are not required and can be omitted, This tutorial covers how to disable sourcemap CSS files in sass compilation.

Sass framework provides three implementations

  • node-sass
  • dart-sass
  • ruby-sass

With sass command, We used to compile sass to CSS file as follows

sass --watch input.scss:output.css

It compiles and converts input.scss into output.css and also generates a source map file i.e output.css.map.

Is it safe to remove these source map files?

These are used for debugging CSS code, which SO does not use in production anymore.

This source map helps to debug and point to the source code file and can be checked in-browser developer tools.

How to disable CSS map files in scss?

Below is the command for disabling applications using node-sass or ruby-sass.

sass --sourcemap=none --watch input.scss:output.css // disable souremap
sass --sourcemap=auto --watch input.scss:output.css // enable sourcemap

–sourcemap attribute tell how the source code looks like in the sourcemap files. It has different values as seen below

  • auto: It is default and contains relative URIs paths
  • file: absolute URI file location
  • inline: generates source content in the sourcemap
  • none: no sourcemaps generated

for dart-sass users

sass --source-map --watch input.scss:output.css // enable sourcemap
sass --no-source-map --watch input.scss:output.css // disable source-map

if the above commands do not work, You can use the –force option as seen below

The –sourcemap=none flag is not working still generating mapping files

Sometimes, The above command will not work, You have to use the –update flag and –force

sass --update --force --sourcemap=none input.scss:output.css

Conclusion

We can disable the source map file based on the sass provides, If still does not work, we can use --update and --force.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.