Question

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

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

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

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

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

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

因此...

有没有办法将@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的混合源的来源不在实际文件范围内时，Sass会抛出该错误（或类似"undefined mixin"的错误）。

我建议您将mixins写入部分文件_mixins.scss中，然后您需要做的就是将其导入到最顶部的styles.scss中。

**测试是使用Dart Sass进行的

希望这很有帮助

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

2 个答案: