Jekyll 不使用 `jekyll serve` 编译 scss 文件

Question

我正在尝试使用 Jekyll 创建一个网站，一切正常。直到我想定制设计。

我更新了我的 css/main.scss 以便在 _sass/theme.scss 中包含我的自定义主题：

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting",
        "theme"
;

我也更新了 _config.yml，因为 jekyll serve -H 0.0.0.0 没有编译我的新 sass 文件。我添加了以下内容：

sass:
    sass_dir: _sass

问题是 jekyll serve 没有编译我的 sass 文件，我总是看到默认的 css。我也试过在css/main.scss的末尾直接复制_sass/theme.scss的内容，但是没有任何反应。

直到我修改了其中一个文件，而 jekyll serve 是运行。问题是 jekyll-watch 理解我的更新并编译 scss 文件。我可能做错了什么 jekyll build 不要在第一次尝试时编译 sass 文件？

如果你需要它，这里是我的项目树：

.
├── _config.yml
├── css
│   ├── main.css
│   └── main.scss
├── _images
├── img
├── index.html
└── _sass
    ├── _base.scss
    ├── _layout.scss
    ├── _syntax-highlighting.scss
    └── _theme.scss

有人知道如何解决这个问题吗？

谢谢，

Answer 1

您是否已将前言添加到 main.scss 文件的顶部？

Answer 2

先添加到你的config.yml

sass:
    sass_dir: _sass

然后在 main.scss 文件的顶部添加两条虚线 https://jekyllrb.com/docs/assets/

---
---

@charset "utf-8";

然后在你的 cmd 控制台中写入

jekyll serve

并检查你的编译。

Answer 3

好的，我明白了！

您有一个 css/main.css 个文件被复制为 _site/css/main.css 中的静态文件。

问题是它与 css/main.scss 目标同名，后者也是 _site/css/main.css。

所以首先构建：

css/main.scss被处理成main.css
然后，当复制静态文件时，它被css/main.css覆盖。

解决方案：删除 css/main.css

Answer 4

我运行在尝试使用 Jekyll 将 YAML 内容传递到部分时遇到了类似的问题。看起来这个工作流程是不可能的。

解决方法是将所有变量放在主 SCSS 文件中，让 Jekyll 填充来自 YAML 的值，然后对实际样式使用分部。

这是一个包含我的一些解决方案的简单回购协议：https://github.com/guschiavon/jekyllfy-sass

Jekyll 不使用 `jekyll serve` 编译 scss 文件

Jekyll doesn't compile scss files with `jekyll serve`

sass

jekyll