SASS - 避免在部分中重复导入mixins

Question

很抱歉，如果已经提出这个问题，但我无法在任何地方找到它。

我正在努力保持我的SASS文件有条理，因此我正在使用大量的部分来分离关注... _mixins.scss。 _header.scss，_footer.scss，_sidebar等

然后我有我的styles.scss文件，看起来有点像：

@import 'mixins'
@import 'header'
@import 'footer'
@import 'sidebar'

我面临的问题是，如果我在我的_mixins.scss部分有一个mixin，让我们说，@function size() {}，我想在_header.scss中使用它，我无法（libsass抛出错误 - Error: no mixin named size）。

在我看来，它应该只是将每个部分导入styles.scss，并且因为它在调用@include size()函数之前获得了部分mixins，那么它应该知道该怎么做。显然情况并非如此......

所以...

有没有办法保存一个@import 'mixins'被放在我的其他部分的顶部？

由于我使用多个库，如果我需要在每个库中维护十几个“内容样式”部分，这可能会很快变得混乱。

---

哦，如果它帮助我使用gulp构建它...相关的任务是：

gulp.task('sass', function() {
  var plugins = [
    autoprefixer({
      browsers: ['> 0%']
    })
  ];
  return gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
      .pipe(sass({
        includePaths: sassPaths,
      }).on('error', sass.logError))
      .pipe(postcss(plugins))
      .pipe(csso())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

Answer 1

是的......在我的真实案例中，我忽略了'content-styles'文件名之前的_，即_header.scss ......我觉得自己像一个涂料！

好吧，至少我学会了部分实际上做了什么。

感谢任何回答此问题的人。 :)

Answer 2

这个案例"Error: no mixin named size"似乎与范围问题有关。

显然，当你@include一个mixin，它的源不在实际的文件范围内时，Sass会抛出那个错误（或类似"undefined mixin"）。

我建议将你的mixins写成一个部分文件_mixins.scss然后你需要做的就是将它导入最顶层的styles.scss。

**使用Dart Sass进行测试

希望这有用