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

Question

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

如果你们中的任何一个在生产中不包含SCSS，您将如何处理Git之类的版本控制。我认为主版本应该在那里有SCSS文件，但是从生产环境中拉出来应该排除它吗？这有问题吗？

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

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

Answer 1

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

¹_{嗯，是的，它可以起作用-有许多SASS实现，包括可以在浏览器中使用的JavaScript。} < / p>

您在浏览器的开发人员工具（不仅仅是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，因此您无需在服务器上安装它。它只需要在本地安装，Browser仅能理解CSS，SAAS是一种预处理器脚本语言，使您的代码易于组织和编辑，而工作量很小。

Answer 3

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

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

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

因此，我将所有内容推送到git中，然后再部署更改以进行实时运行，然后在本地运行构建命令*，然后将所有内容推送到Git中。

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

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