Gulp-sass 流（导入和混合）

Question

我最近一直在使用 Prepros，它会自动执行一些神奇的操作，我决定转向 Gulp，但我有麻烦了，我想。

我有多个 scss 文件，例如：

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

现在，使用 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');
    });
});

有什么提示吗？

Answer 1

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

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

这似乎是您的问题，不是 gulp 问题，而是 sass 问题。

这样您就可以告诉 sass 编译器不应编译这些文件。

From sass docs:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Gulp-sass 流（导入和混合）

Gulp-sass flow (importing and mixins)

sass

gulp

gulp-sass