如何在jekyll中使用scss？

Question

我在SO here和GH here上看到了类似的帖子，但都没有解决我的问题。

我的gh页面上有一个Jekyll应用程序，我需要使用scss功能（主要用于mixins）。但是，我无法让jekyll使用scss。

目前，这是我的（CSS）文件所在的位置。我的所有CSS都来自custom.css。我在标题<link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css">中导入了它。

.scss文件夹中的_sass个文件为空。

这就是_config.yml内部的样子：

...
#sass
sass:
  sass_dir:           _sass
  style:              compressed

这就是我现在所处的位置。以下是我尝试过的一些事情：

1. 我尝试将custom.css更改为custom.scss（然后更新标题<link href... stylesheets/custom.scss">。当我这样做时，我收到Resource interpreted as Stylesheet but transferred with MIME type text/x-scss...错误。

2. 我尝试将_config.yml内的配置更改为： sass: sass_dir: assets/stylesheets style: compressed ...并保持更改1.我重新启动jekyll server。但是我仍然会收到Resource interpreted as Stylesheet but transferred with MIME type text/x-scss...错误。

3. 尝试添加<link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss">，但我收到GET http://localhost:4000/_sass/main.scss错误。

问题，我注意到，该应用似乎根本无法识别main.scss。我尝试使用main.scss创建一个简单的红色div，但没有显示任何内容。

问题是，如何将.scss与杰基尔一起使用？

Answer 1

拥有_sass/main.scss，在assets/stylesheets/custom.css中添加sass文件（在开头保留三个破折号）：

---
---

@import "main";

现在，您可以使用导入关键字下方custom.css中的所有sass变量/ mixins等。

确保将生成的css添加到您的布局：

<link rel="stylesheet" href="{{'/assets/stylesheets/custom.css' | absolute_url}}">