SCS @import in Jekyll 2.1

Question

我是这个项目结构

-Project
    -css
        -main.scss
        -_sass/
            -base
            -layout
            -pages
            -vendor

我的main.scss文件的内容。

---
---

@import "sass/base/reset";
@import "sass/base/colours";
@import "sass/base/vars-typeplate";
@import "sass/base/typeplate";

我已经在Jekyll文档中读到，为了使用SCSS语句，我必须包含sass：sass_dir：_sass。我想我已经在_config.yml中添加了这一行。但我在我做了它，它仍然无法正常工作。每次我尝试运行jekyll服务。我的控制台显示以下消息：

jekyll 2.1.0 | Error:  File to import not found or unreadable

Answer 1

Jekyll doc说：如果您使用的是Sass @import语句，则需要确保将 sass_dir 设置为包含您的基本目录Sass文件。

然后对你来说它是 css / _sass 。

在_config.yml中，您有：

sass:
    sass_dir: css/_sass

在css / mains.cscc

中

---
---

@import "reset";

就是这样。

Answer 2

对于登陆Jekyll 3.x的用户来说，这是一个简单的模式：

将文件添加到_sass目录，例如：

.
├── elements.scss
├── forms.scss
├── layout.scss
├── mixins
│   ├── columns.scss
│   └── flexbox.scss
├── navigation.scss
└── variables.scss

没有必要为这些文件中的任何一个添加空前面块，不需要更新你的Jekyll配置。

然后，在您的网站根目录下创建一个css文件夹，并创建一个screen.scss文件，如下所示：

---
---
@import "mixins/flexbox";
@import "mixins/columns";
@import "variables";
@import "elements";
@import "layout";
@import "forms";

请注意，此文件 使用---\n--，以便Jekyll接收并正确处理。

结果将是一个文件输出，其中包含您可以在文档头中的链接标记中使用的所有已编译的CSS：

<link rel="stylesheet" href="{{ site.baseurl }}/css/screen.css">

请注意，这会导致浏览器出现阻塞，因为他们必须暂停以在页面渲染时获取CSS资源。 alternative approaches对于PageSpeed更好，但它们更先进。

请务必咨询Jekyll docs以获取最新信息。

Answer 3

进入config.yml

sass_dir: css/_sass

您必须指定完整的网址。

Answer 4

将_sass放在项目的根目录。