在 Grav CMS 的自定义主题中设置 SCSS 编译

Question

试图掌握 Grav 并使用（或在我的早期理解阶段，基本上是复制）默认 Quark 主题的最低限度从头开始创建一个全新的主题。

我已经准备好基本文件和文件夹，但我正在努力弄清楚我要做什么，才能让 SCSS 编译正常工作。

我正在使用安装了 Plesk 的 CentOS 7 Linux 服务器。

我知道在 Grav 中可能有不同的主题化方式，但在我学习系统的同时，我希望我的自定义主题能够像 Quark 一样工作。我已经在主题文件夹中设置了scss 文件夹以及css-compiled 文件夹，以便将编译后的 CSS 移入。

我在下面附上了主题结构的屏幕截图（如果有任何用处）：

我不确定我是否需要在服务器上安装一些东西（例如 Node.js/npm 和 Gulp.js），或者这是否应该自动发生。

如果我需要在服务器上进行设置，那么这会引发我认为的其他问题，但我只需要有人指出我正确的方向，因为我不知道向谁/在哪里问这个...

如果我将我的 theme.scss 文件中的 @import 命令指向直接从 Quark 主题导入，如 'Customisation' documentation 中所述，仍然不会为前端生成 CSS。

Answer 1

要在 localhost 上编译 SCSS，您需要执行以下操作：

• Download 并安装 Node（包括它的包管理器“npm”）
• $ cd user/themes/mytheme
• 加载 package.json 中列出的（开发）依赖项：$ npm install
  这将加载所需的一切：Gulp、SCSS 编译器等。
• 通过运行 package.json 中的“构建”脚本来编译 SCSS 文件：$ npm run build
  这将在gulpfile.js 中运行'build()' 函数
• 在文件夹 /user/themes/mytheme/css-compiled 中，您现在应该可以找到具有新日期的文件。

现在您可以在Customising SCSS 上关注 Grav 的文档，对 SCSS 进行自己的更改。如果你运行$ npm run dev，Gulp 会在检测到更改时自动编译你的 SCSS。

注意：我假设 package.json 和 gulpfile.js 是从 Quark 复制的。