何时编译 SASS答案

【问题标题】：when to compile SASS何时编译 SASS
【发布时间】：2019-02-09 10:05:09
【问题描述】：

我是网络开发的新手。我已经阅读了有关 SCSS/SASS 的内容，我意识到这不是浏览器要查找的内容，因此应该将其编译为纯 CSS。我的问题是我做对了吗：

每当我对我的 SCSS 文件进行更改时，我都应该编译它，然后查看结果。
每当我想更新我的网站时，我应该在我的服务器端有一个特殊的脚本来将新的 SCSS 文件转换为纯 CSS，并且每次更新只发生一次。（CSS 文件的数量很多，我希望在我的存储库中只保留 SCSS）。

如果您有任何进一步的信息，我将不胜感激。

很多

【问题讨论】：

你不会将 SCSS 代码部署到你的服务器上，它总是必须转换成 CSS
如果您使用 Sass 构建 Web 应用程序，您将需要一个本地构建过程。看看 Webpack。然后，您将在本地进行开发，通常，这些文件会被监视并立即作为 CSS 文件提供给您的本地实例。然后，在完成开发后，您使用所有缩小的 CSS 文件创建最终构建，并将其上传到您的 Web 服务器。
你不需要task runner来编译sass，它实际上可以从cli sass-lang.com/install运行。但是对于开发来说，肯定会推荐使用某种任务运行器。
简而言之，每次保存 SASS 文件时都会使用一个应用程序进行编译。 Gulp、Webpack、Prepos 都配置为保存时编译

标签： css web sass

【解决方案1】：

为了将 SCSS 编译为 CSS，我们使用任务运行器，例如 Gulp、Webpack 等。我'将解释以 Gulp 为例。

什么是 Gulp？

Gulp 是在前端 Web 开发过程中用作流式构建系统的任务运行器。主要用于 Web 开发中耗时且重复的任务的自动化，如缩小、连接、编译、单元测试、linting、优化等。

您可以使用 Gulp 来编译您的 SCSScode CSS，并且通过 gulp，您还可以实时监控更改。

要安装 Gulp，您必须在系统中安装 Node Js。之后使用npm i gulp-cli -g 安装 gulp。您可以在其官方website找到使用信息。

要将 SCSS 编译设置为 CSS，这是您可以找到的关于 Gulp 开始进行 SCSS 编译和其他任务的最佳文章。 Gulp for Beginners

【讨论】：

【解决方案2】：

我将以Laravel为例。

Laravel 自带Laravel Mix，它允许你在内部使用 Webpack 将 SCSS、LESS 等编译成 CSS。（它也用 js 做事）

Laravel 默认自带文件夹resources/assets/sass，这是你放置 scss/sass 文件的地方。

然后，它会编译这些文件，并在您运行 npm run dev 时将它们放入您的 public/css 文件夹中。您也可以在进行更改时使用npm run watch 编译这些文件并保存 scss 文件。

它还有npm run prod命令，将文件编译成缩小格式，使文件更轻。

如果您使用 SCSS 编写所有 css，您甚至不需要将 public/css 文件夹放在您的 git 存储库中。

每当您将更改推送到 git 并希望在服务器中更新它们时，只需更新服务器的存储库并运行您拥有的编译命令。

如果您不使用 git 将更改推送到服务器，则可以使用 npm run prod 编译 CSS 文件，然后通过 FTP 或任何其他方式将这些文件推送到服务器。

【讨论】：