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

Question

I have these two lines of code in my main.scss as required by the MDC Web's docs.

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

Then, I have this Gulp task to convert my main.scss file to a single build.css file. My main.scss file compiles just fine when I remove the two lines above.

The error I am getting is the following.

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

My Gulp task is the following.

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());
});

I am using gulp-dart-sass to compile the .scss files. How can I fix the error?

Answer 1

I assume you are using package.json, material-components-web is added to dependencies and dependencies are installed. Then it looks like you need to add node_modules to load paths for Sass to look for imports:

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