css - Sass 错误：当 @use-ing MDC Web 的按钮使用 Gulp 时找不到要导入的样式表

Question

根据MDC Web's docs 的main.scss要求，我有这两行代码。

@use "@material/button";
@include button.core-styles;

然后，我有这个 Gulp 任务将我main.scss的文件转换为单个build.css文件。main.scss当我删除上面的两行时，我的文件编译得很好。

我得到的错误如下。

Message:
    src\styles\main.scss
Error: Can't find stylesheet to import.
  ╷
1 │ @use "@material/button";
  │ ^^^^^^^^^^^^^^^^^^^^^^^

我的 Gulp 任务如下。

gulp.task('css', ['clean:css'], function() {
  return gulp.src('src/styles/main.scss')
    .pipe(isDist ? through() : plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
    .pipe(isDist ? csso() : through())
    .pipe(rename('build.css'))
    .pipe(gulp.dest('dist/build'))
    .pipe(connect.reload());
});

我gulp-dart-sass用来编译.scss文件。如何修复错误？

Answer 1

我假设您正在使用package.json， 将material-components-web添加到依赖项并安装依赖项。然后看起来您需要添加node_modules来加载路径，以便 Sass 查找导入：

...
     .pipe(sass({ includePaths: ['node_modules'] }).on('error', sass.logError))
...