Jekyll 2.1 中的 SCSS @import答案

【问题标题】：SCSS @import in Jekyll 2.1Jekyll 2.1 中的 SCSS @import
【发布时间】：2014-07-05 14:59:10
【问题描述】：

我有这个项目结构

-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

【问题讨论】：

也许你应该先试试看这个：compass-style.org我对 Jekyll 一无所知，但你需要先安装 sass（当你安装 compass 插件时，它也会自动安装 sass + 指南针很棒）
我的机器上安装了 Sass。 Jekyll 可以很好地运行我的 Sass 文件，虽然我要使用 @import 语句，但我需要设置一些特殊的配置。
也许你可以试试：@import "reset";而不是整个路径？
它给了我同样的错误。
最后一个选项我知道了（因为我知道 sass，但不知道 Jekyll。是不要使用分层的 scss 文件。只是把它们都放在 css 文件夹中。否则我无法帮助你跨度>

标签： sass jekyll

【解决方案1】：

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

那么对你来说就是 css/_sass。

在您的 _config.yml 中，您有：

sass:
    sass_dir: css/_sass

在 css/mains.cscc 中

---
---

@import "reset";

就是这样。

【讨论】：

【解决方案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">

请咨询Jekyll docs 了解最新信息。

【讨论】：

【解决方案3】：

进入config.yml

sass_dir: css/_sass

您必须指定完整的网址。

【讨论】：

【解决方案4】：

将 _sass 放在项目的根目录下。

【讨论】：