Sass Error: can't find stylesheet to import when @use-ing MDC Web's button using 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))
...

Sass Error: can't find stylesheet to import when @use-ing MDC Web's button using Gulp

Sass Error: can't find stylesheet to import when @use-ing MDC Web's button using Gulp

css

sass

gulp

mdc-components

material-components-web