Gulp-sass 流（导入和混合）答案

【问题标题】：Gulp-sass flow (importing and mixins)Gulp-sass 流（导入和混合）
【发布时间】：2016-02-25 10:29:40
【问题描述】：

我最近一直在使用 Prepros，它会自动执行一些魔法，我决定迁移到 Gulp，但我想我遇到了麻烦。

我有多个 scss 文件，例如：

mixins.scss（这里存储了所有的 mixins） variables.scss（这里是变量） colors.scss（和颜色） base.scss（我的应用程序的基本样式） app.scss（这里我导入 mixins、变量、颜色和基础 - 按此顺序）

现在，使用 Prepros，它曾经像这样工作 - 首先将所有文件导入 app.scss，然后生成漂亮的 app.css 文件，简单而轻松。

我认为 Gulp 会尝试分别编译这些文件中的每一个，但在 base.scss 处失败，因为我在那里使用了 mixins/variables/colors 而 Gulp 不知道这些。

我该如何解决这个问题？我在想也许只看 app.scss 就可以解决问题，但是 app.scss 甚至都不知道 variables.scss 是否有任何变化。

我的默认 Gulp 任务如下所示：

// default task for "gulp"
gulp.task('default', ['sass'], function() {
    gulp.watch('./assets/scss/*.scss', function() {
        gulp.run('sass');
    });
});

有什么提示吗？

【问题讨论】：

标签： sass gulp gulp-sass

【解决方案1】：

您是否 100% 确定您的所有部分文件（mixins、变量等）都已正确命名？

也就是说，它们以下划线开头，即：_variables.scss、_mixins.scss 等。

这对你来说似乎是个问题，不是 gulp 问题，而是一个 sass 问题。

这样你告诉 sass 编译器不应该编译这些文件。

From sass docs:

下划线让 Sass 知道该文件只是部分文件，并且它不应该被生成到 CSS 文件中。 Sass 部分是与@import 指令一起使用。

【讨论】：