Gulp sass 没有在所有导入中定义变量和混合？答案

【问题标题】：Gulp sass not defining variables & mixins across all imports?Gulp sass 没有在所有导入中定义变量和混合？
【发布时间】：2017-07-29 12:31:03
【问题描述】：

我正在用 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 和变量文件，它可以正常工作。这里发生了什么？

【问题讨论】：

标签： css sass gulp

【解决方案1】：

问题出在我的文件名上。它们前面没有下划线，这似乎是编译器正常工作的约定。所以src/styles/navigation.scss 变成了src/styles/_navigation.scss。导入保持不变：

@import 'src/styles/navigation';

【讨论】：

这里也一样！感谢你的回答！我认为 node-sass 不需要下划线。

【解决方案2】：

我假设你使用 gulp-sass。

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

在这种情况下，我在包含路径中调用 Foundation 和 compass 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 文件中指定的这个节点模块路径中的 compass 文件，以及foundation.scss（它导入了很多其他的 scss 文件）。然后，一旦基础可用，我就会初始化所有的 mixin。

总结一下： 可能的解决方案： 1：检查这个包含路径的 gulpfile 定义是否解决了路由错误。 2：检查你正在导入的模块是否没有触发mixin来启用它们，比如foundation有他的“foundation-everything”

希望这会有所帮助。

【讨论】：