How to disable source map CSS files in sass?

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

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

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

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.