SASS 是一个预处理器,它编译成sass 文件并输出.css 和 .css.map文件。css map 帮助开发人员调试这些文件。
在生产中,这些文件是不需要的,可以省略,本教程包括如何在sass编译中禁用sourcemap css文件。
Sass框架提供了三种实现方式
- node-sass
- dart-sass
- ruby-sass
用sass命令,我们用来编译sass到css文件,如下所示
sass --watch input.scss:output.css
这样编译并将input.scss 转为output.css ,同时生成源码图文件,即output.css.map
删除这个源码图文件是否安全?
这些文件是用来调试css代码的,所以在生产中不会再使用。
这些源码图有助于调试和指向原始源码文件,可以在浏览器开发工具中检查。
如何在scss中禁用css地图文件?
以下是禁用的命令,如果应用程序使用node-sass 或ruby-sass
sass --sourcemap=none --watch input.scss:output.css // disable souremap
sass --sourcemap=auto --watch input.scss:output.css // enable sourcemap
-sourcemap属性告诉我们源代码在sourcemap文件中是什么样子的。它有不同的值,如下所示
- auto。这是默认值,包含相对URI路径
- file:绝对的URI文件位置
- inline: 在源码表中生成源码内容
- none: 不生成源码图
对于dart-sass 用户
sass --source-map --watch input.scss:output.css // enable sourcemap
sass --no-source-map --watch input.scss:output.css // disable source-map
如果上述命令不起作用,你可以使用-force选项,如下所示
-sourcemap=none标志不起作用,仍然生成映射文件。
有时,上述命令不起作用,你必须使用-update标志和-force。
sass --update --force --sourcemap=none input.scss:output.css
总结
我们可以根据sass提供的源码图文件来禁用,如果还是不行,我们可以使用--update 和--force 。