您需要在生产中部署 SASS 吗？答案

【问题标题】：Do you need to deploy SASS in production?您需要在生产中部署 SASS 吗？
【发布时间】：2019-02-10 17:51:36
【问题描述】：

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

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

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

我之所以问这个问题是因为最近使用 Chrome DevTools 我一直将 scss 文件视为源。要明白我的意思，如果你去 getbootstrap.com 并检查它的样式，你会看到 scss 作为源。

【问题讨论】：

不，您不需要部署任何属于您的 build 过程的内容，只需部署它的输出即可。显然你把 SCSS 文件保存在你的 Git 上，所以我不太明白这个问题。这类问题最好在 Reddit 上提出。 Stackoverflow 是针对非常具体的问题，而不是像这样的一般工作流问题
我问这个的原因是因为最近使用 Chrome DevTools 我有时会看到 scss 文件作为源。要明白我的意思，如果你去 getbootstrap.com 并检查它的样式，你会看到 scss 作为源。
好的。那么如何部署版本控制呢？你只是在生产端做一个 .gitignore 吗？ @vsync 如果你真的不明白这个问题，你可能应该保持安静。
@japonix - 由于source map 文件，您在 devtools 中看到了 SCSS 文件。

标签： css git sass production

【解决方案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 */

...浏览器下载地图（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,[…]

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

是否可以分发它们，或者它们包含旨在保持私有的内容，例如内部 cmets 或知识产权？
您需要诊断实时站点中的内容吗？

【讨论】：

2021 年大多数浏览器都理解 sass，但出于性能和兼容性考虑，仍然鼓励编译。

【解决方案2】：

Sass 是转换成 CSS 的，所以你不需要在服务器上安装它。只需要在本地安装，浏览器只懂 CSS，SAAS 是一种预处理脚本语言，让你的代码易于组织和编辑。

【讨论】：

我之所以问这个问题是因为最近使用 Chrome DevTools 我一直将 scss 文件作为源文件。要明白我的意思，如果你去 getbootstrap.com 并检查它的样式，你会看到 scss 作为源。
这是因为它们在生产站点上包含了 Sass 源映射，因此 Chrome 可以从 Sass 文件中了解哪些 CSS 规则。

【解决方案3】：

这取决于您的构建过程。如果您在运行部署时推送 Sass 文件并在网络服务器上编译，那么可以。但我有一个类似这样的文件结构：

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

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

所以我将所有内容都推送到 git 中，在将更改部署到 live 之前，我在本地运行我的构建命令*，然后将所有内容推送到 Git。

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

* 我的构建命令是我的常规编译命令，除了我只在构建时缩小。

【讨论】：