如何禁用sass中的sourcemap css文件?| no-source-map 示例

481 阅读1分钟

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