在实时服务器上自动将 SCSS 转换为 CSS

Question

我是 SCSS 的新手。我喜欢使用 SASS 进行本地开发，但是当我发布客户的网站并需要进行更改时，必须挖掘出旧项目并设置所有内容以便我可以在本地进行编辑，然后将这些更改发布到生产现场。

目前，我在 SCSS 文件中进行更改，然后使用在线 SCSS 到 CSS 转换器工具，将 SCSS 转换为 CSS，然后将该 CSS 放入 CSS 文件中。

有没有什么办法，如果我在服务器中更改 SCSS 文件，那么它应该直接更新 CSS 文件？

目前，我使用 HTML、CSS、SCSS 和 Javascript

谢谢，

Answer 1

使用

sass

包而不是像

Live SASS Compiler

这样的 VSCode 扩展。

为什么我们不应该使用“Live SASS Compiler”VSCode 扩展？

1. Live SASS 编译器扩展很旧，并且已经有一段时间没有更新了。
2. 某些功能（如

   @debug

   、

   @warn

   、

   @error

   ）将不起作用，因此如果您正在使用它，则必须使用

   sass

   npm 包。

那么，如何安装sass包呢？

1. 很简单，只需运行这些命令即可。

npm install -g sass

2. 并通过在终端上运行以下命令自动将 SASS 转换为 CSS。

sass -w source/stylesheets/index.scss build/stylesheets/index.css

更多信息可在此处的 sass 文档中找到

Answer 2

来源 - https://pineco.de/the-simplest-sass-compile-setup
作者：-亚当·拉基

---

确保您的项目有一个

package.json

文件（并且您的计算机上安装了 Node ）。如果您有 Node 但没有

npm init

文件，请运行

package.json

来初始化一个。

安装sass包：

npm install sass --save-dev

了解有关该软件包及其 CLI 的更多信息

在

package.json

文件的

scripts

部分中，添加以下内容：

"scripts": {
    "sass-dev": "sass --watch --update --style=expanded assets/css",
    "sass-prod": "sass --no-source-map --style=compressed assets/css"
},

运行脚本：

npm run sass-dev
// or
npm run sass-prod

什么是源地图？允许浏览器从已处理的串联文件映射回原始文件的特定文件。这很有帮助，因为我们在开发者工具中调试 CSS 时可以看到原始文件名。

以上是编译 SCSS 文件并“观察”它们的更改的非常基本的设置。你的服务器应该有一个管道或某种构建系统，它能够运行这个npm命令来编译SCSS文件，所以理论上你不需要将预编译的CSS文件推送到服务器，但它自己做到了。

Answer 3

看看我们如何将 scss 转换为 css

https://youtu.be/vRqlB8csZu8