SCSS @import in Jekyll 2.1

我有这个项目结构

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

我的主要内容。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

Jekyll doc说:如果你正在使用Sass @import语句，你需要确保你的sass_dir被设置为包含Sass文件的基目录。

你的目录是css/_sass

在你的_config。Yml，你有:

sass:
    sass_dir: css/_sass

和css/main .cscc

---
---
@import "reset";

就这样。

对于在Jekyll 3登陆的用户。下面是一个简单的模式:

添加文件到您的_sass目录，如:

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

不需要在这些文件前面加上一个空的front matter块，也不需要更新你的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文档获取最新版本

Into config.yml

sass_dir: css/_sass

将_sass放在项目的根目录

相关内容