时间戳

首页 > 解决方案 > 在 Grav CMS 的自定义主题中设置 SCSS 编译

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

问题描述

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

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

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

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

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

Grav主题文件夹结构

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

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

如果我将我的 theme.scss 文件中的 @import 命令指向直接从 Quark 主题导入，如“自定义”文档中所述，仍然没有为前端生成 CSS。

标签： sassgrav

解决方案

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

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

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

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

推荐阅读