如何在 SASS 中配置 Source Map

前端工程化在近年来被广泛应用，而 SASS 是前端开发中常用的 CSS 预处理器。有时候，我们需要调试 SASS 文件，这时候就需要配置 Source Map 了。本文将为大家详细介绍如何在 SASS 中配置 Source Map，并提供示例代码以供参考。

什么是 Source Map

Source Map 是一种 JavaScript 文件，它将压缩后的JavaScript 源代码与它们原始版本的位置之间做了映射，提供一种映射机制，使得编译后的代码能够被还原成源文件。在前端开发中，SASS 和 JavaScript 都可以生成 Source Map。

配置 SASS 的 Source Map

1. 安装 SASS

首先，在本地环境安装 SASS，执行以下命令即可：

$ sass --version

如果提示 command not found: sass，则需要先安装 SASS。执行以下命令进行安装：

$ npm install -g sass

1. 配置 SASS 编译命令

在 SASS 编辑器中配置 SASS 的 source-map 选项。举例来说，我们可以使用 VS Code 来配置 SASS 的 source-map 选项。打开 VS Code 中的设置，找到 “sass” 相关的选项，将 “sourceMap” 选项设为 true。

"sass.compile": {
  "sourceMap": true
}

1. 编译 SASS 文件

在命令行中输入以下命令来编译 SASS 文件：

$ sass --watch input.scss:output.css --sourcemap

其中，input.scss 为输入文件的路径，output.css 为输出文件的路径，--sourcemap 是生成 source map 的命令选项。

1. 在浏览器中查看 Source Map

在编写 SASS 文件时，如有语法错误，浏览器控制台会打印出错误信息，并且会标示出错误所在的 SASS 文件和行数。

通过点击文件名和行数，可以在 Sources 面板中的对应位置找到对应源文件的位置。

总结

本文介绍了如何在 SASS 中进行 Source Map 配置，以及如何查看 SASS 生成的 Source Map 文件。Source Map 是调试 SASS 文件非常必要的工具，它可以让开发者在调试 CSS 代码时更加快捷、方便。

参考示例代码：

// input.scss
$color: #f00;

body {
  color: $color;
}

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492b6c448841e9894083d5f