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