Gulp没有定义变量＆amp;所有进口产品都在混合？

Question

我用gulp-scss编译我的SCSS。我的styles.scss文件如下所示：

@import "node_modules/bulma/sass/utilities/initial-variables";
@import "node_modules/bulma/bulma";
@import 'src/styles/navigation';

此代码的第二行导入Bulma，其源代码可以找到here。此文件会导入一些utilities，包括我需要的一些mixins。

不幸的是，当我尝试在navigation.scss文件中使用这些mixin时：

@include desktop {
  .navbar {
    min-height: 135px;
  }
}

我收到以下错误：

值得注意的是，如果我@import直接navigation.scss中的mixins和变量文件，它可以正常工作。这里发生了什么？

Answer 1

我会假设你使用gulp-sass。

我通常做的是在gulp文件中创建一个路径以便更好地参考，并且为了让我知道gulp我将在.scss文件中使用这些节点资源。

在这种情况下，我在include路径中调用基础和指南针mixins模块。

这是Gulfile.js

中的任务

gulp.task('styles', function () {
  gulp.src('src/scss/application.scss')
    .pipe(sass({
      includePaths: [
       'node_modules/foundation-sites/scss',
       'node_modules/compass-mixins/lib'
      ],
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./public/css/'))
});

然后在您的主.scss或您想要为这些文件导入的位置，您只需添加：

@import 'compass';
@import 'foundation';
@include foundation-everything;

在这里，我在gulp文件中指定的此节点模块路径中调用指南针文件，以及foundation.scss（导入许多其他scss文件）。 然后，一旦基础可用，我初始化所有mixins。

所以总结： 可能的解决方案： 1：检查带有包含路径的gulpfile定义是否解决了路由错误。 2：检查你导入的模块是否没有触发mixin来启用它们，比如基金会有他的“基础 - 一切”

希望这有帮助。

Answer 2

问题在于我的文件名。它们之前没有下划线，这似乎是编译器正常工作的惯例。因此src/styles/navigation.scss成为src/styles/_navigation.scss。进口保持不变：

@import 'src/styles/navigation';