你需要在生产中部署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 */

...浏览器下载地图（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. 你需要在现场诊断东西吗？

Answer 2

Sass转换为CSS，因此您无需在服务器上安装它。它只需要在本地安装，浏览器只能理解CSS，SAAS是一种预处理器脚本语言，可以轻松地组织和编辑代码。

Answer 3

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

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

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

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

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

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