css - 您需要在生产中部署 SASS 吗？

Question

我们需要在生产中包含 SASS 文件吗？我们不能只部署编译后的 CSS 输出吗？你们如何在生产中部署 CSS/SCSS 代码？

如果你们中的任何人不在生产中包含 SCSS，你们如何处理像 Git 这样的版本控制。我假设主版本应该有 SCSS 文件，但是从生产环境中提取它应该被排除在外？这有问题吗？

我只想看看最有效的方法是什么。

我问这个问题的原因是，最近使用 Chrome DevTools 我一直看到 scss 文件作为源。要理解我的意思，如果您访问 getbootstrap.com 并检查其样式，您会看到 scss 作为源。

Answer 1

浏览器不呈现或理解 SASS 代码。因此，为了样式化而提供此类文件不仅不是必需的，而且甚至不起作用¹。

¹ _{嗯，是的，它可以工作——有很多 SASS 实现，包括 JavaScript一个可以在浏览器中使用的。}

您在浏览器的开发者工具(不仅仅是 Chrome)中看到的 SASS 代码是一个开发者工具。为了诊断 CSS 问题，您可以指示 SASS 编译器生成 source maps .源映射是一个文档，它将您可能缩小的 CSS 文件中的位置链接到它来自的 SASS 源代码。当您打开开发人员工具并且 CSS 文件声明源映射 (example) 时:

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f[…]
/*# sourceMappingURL=bootstrap.min.css.map */

…浏览器下载 map (example)，它又链接相应的 SASS 源代码文件。

{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss"[…]

与文件/行/列映射信息一起，开发人员工具可以重构给定元素样式来自的 SASS 代码。

"mappings":"AAAA;;;;;ACAA,MAGI,OAAA,QAAA,SAAA,QAAA,SAAA,QAAA,[…]

源文件显然不是必需的。是否包括它们取决于以下因素:

1. 是否可以分发它们，或者它们包含本应保密的内容，例如内部评论或知识产权？

2. 您需要诊断实时站点中的内容吗？