将 SCSS 文件转换为 CSS 文件

要将 SCSS 文件转换为 CSS 文件，可以通过以下步骤操作：

---

方法 1: 使用 sass 命令行工具

1.**安装 Sass**（如果尚未安装）：

npm install -g sass

或使用 yarn：

yarn global add sass

2.**转换单个文件**：

sass input.scss output.css

3.**监听文件变化**（可选）：

sass --watch input.scss:output.css

当 input.scss 保存时，会自动重新生成 output.css。

4.**压缩输出**（可选）：

sass input.scss output.css --style compressed

--style compressed 会生成压缩后的 CSS。

---

方法 2: 使用在线工具

如果你不想安装工具，可以使用在线转换网站：

访问 SassMeisterCodeBeautify

1. 将 SCSS 代码粘贴到输入框。

2. 点击转换，复制生成的 CSS。

---

示例

输入 SCSS 代码：

$primary-color: #333; body { font-family: Arial; color: $primary-color; .container { padding: 20px; } }

输出 CSS 代码：

body { font-family: Arial; color: #333; } body .container { padding: 20px; }

---

注意事项

1.确保 SCSS 语法正确，避免嵌套或变量错误。

2.如果项目中有多个 SCSS 文件，建议使用

sass --watch <输入目录>:<输出目录> 批量处理。

3.最终在 HTML 中引入生成的 CSS 文件：

<link rel="stylesheet" href="output.css">

4.有可能出现cannot find node:fs/promise：node版本和sass版本冲突，重新npm install sass@需要的版本