您是否需要在生产环境中部署SASS？

Question

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

如果你们中有任何人不将SCSS包含在生产环境中，那么你们如何处理像Git这样的版本控制呢？我认为主版本应该包含SCSS文件，但是从生产环境中拉取时应该排除它。这会有问题吗？

我只想看到最有效的方法。

之所以问这个问题，是因为最近使用Chrome DevTools，我发现scss文件作为源文件。如果你去getbootstrap.com并检查它的样式，你会看到scss作为源文件。

- japonix

---

不需要部署构建过程中的任何内容，只需输出即可。显然您会将SCSS文件放在Git上，所以我真的不明白这个问题。这样的问题最好在Reddit上提问。Stackoverflow专门用于解决非常具体的问题，而不是像这样一般性的工作流程问题。 - vsync

我之所以问这个问题，是因为最近使用Chrome DevTools时，有时会看到scss文件作为源文件。如果你去https://getbootstrap.com并检查它的样式，你会看到scss作为源文件。 - japonix

好的。那么您如何部署版本控制呢？您只是在生产环境中执行 .gitignore 吗？@vsync 如果您真的不理解这个问题，最好还是保持安静。 - japonix

@japonix - 你在开发工具中看到的 SCSS 文件是由于存在source map 文件。 - vsync

Answer 1

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

¹ _{嗯，是的，它可以运行——有许多SASS实现，包括可以在浏览器中使用的JavaScript实现。}

你在浏览器开发工具中看到的SASS代码（不只是Chrome）是一个开发者工具。为了诊断CSS问题，您可以指示SASS编译器生成源映射。源映射是一个文档，将可能被压缩的CSS文件中的位置链接到它来自的SASS源代码。当您打开开发者工具并且CSS文件声明了一个源映射（示例）时：

/*!
 * 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 */

浏览器下载地图(示例)，然后链接相应的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. 您是否需要在现场诊断问题？

- Álvaro González

---

在2021年，大多数浏览器都能理解Sass，但为了性能和兼容性仍然建议进行编译。 - Hannes Schneidermayer

Answer 2

Sass被转换为CSS，因此您无需在服务器上安装它。它只需要在本地安装即可，浏览器只能理解CSS。Sass是一种预处理脚本语言，可以使您的代码易于组织和编辑，只需要付出少量的努力。

- Mohamad Al Masri

---

我之所以问这个问题，是因为最近使用Chrome DevTools时，我看到了scss文件作为源文件。如果你去getbootstrap.com并检查它的样式，你会看到scss作为源文件。 - japonix

这是因为他们在生产网站上包含了Sass源代码映射，因此Chrome知道哪些CSS规则来自哪些Sass文件。 - Jay

Answer 3

这取决于您的构建过程。如果您推送Sass文件并在运行部署时在Web服务器上编译，则是的。但是，我的文件结构类似于：

- src
--- styles
------ Sass files
--- js
--- images

- build
--- assets
------ styles
--------- CSS files
------ js
------ images

所以我把所有东西都推到 Git 上，在部署更改到线上之前，我会在本地运行我的构建命令*，然后将所有内容推到 Git 上。

从这里开始，我将 /build 目录中的所有内容部署到我的网站的 Web 服务器上。

* 我的构建命令是我的常规编译命令，只不过我只在构建时进行缩小。

- Jay