How to disable sourcemap 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 developer to debug this 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

THis compiles and convert input.scss into output.css and also generate source map file i.e output.css.map

It it safe to remove this source map files?

These are used for debugging css code, SO this will not be used in production anymore.

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

How to disable css map files in scss?

Below is the command for disableif application is 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 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 above commands does not works, You can use –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 –update flag and –force

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

Conclusion

We can disable source map file based on sass provides, If still not works, 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.