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

SASS is a preprocessor that compiles into sass files and outputs .css and 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

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 by 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 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


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