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

Posted 2023-03-06

【中文标题】在实时服务器上自动将 SCSS 转换为 CSS

【英文标题】：Convert SCSS to CSS automatically on live server

【发布时间】：2022-01-11 11:09:02

【问题描述】：

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

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

如果我在服务器中对 SCSS 文件进行更改，有什么方法可以直接更新 CSS 文件？

目前，我使用 html、CSS、SCSS 和 javascript

谢谢，

【问题讨论】：

你在 npm 中检查了node-sass 吗？

node-sass 已被弃用多年。使用sass。

使用 npm 脚本 自动监视文件并将它们编译为单个 CSS 文件 - pineco.de/the-simplest-sass-compile-setup

您确定要这样做吗？为什么不使用 CI 服务器构建和部署文件的正确部署过程？我怀疑您是否可以在任何服务器上安装整个管道

“不得不挖掘旧项目并设置所有内容以便我可以在本地编辑是一件很痛苦的事情” - 你真正的问题是你使用什么机制来存储你的项目然后获取它们准备再次编辑是太多的工作，您应该研究简化设置的方法。如果您只使用 HTML、CSS、SCSS 和 JS，那么您应该处于这样的位置：启动并运行项目是一个简单的 Git 签出，然后是两个命令来安装所有依赖项并运行开发环境。跨度>

【参考方案1】：

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

---

确保您的项目有一个package.json 文件（并且您的机器上安装了 Node）。如果你有 Node 但没有 package.json 文件，则运行 npm init 来初始化一个。

安装sass包：

npm install sass --save-dev

Learn more about the package and its 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文件到服务器，但它自己做。

【参考方案2】：

使用 sass 包而不是像 Live SASS Compiler 这样的 VSCode 扩展。

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

Live SASS Compiler 扩展程序已经过时，有一段时间没有更新了。 @debug、@warn、@error 等某些功能将无法使用，因此如果您正在使用它，则必须为此使用 sass npm 包。

那么，如何安装 sass 包？

如此简单，只需运行这些命令即可。

npm install -g sass

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

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

更多信息请访问sass docs here