1

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?

Richard
  • 7,037
  • 2
  • 23
  • 76

1 Answers1

2

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))
...
Konstantin Lyakh
  • 781
  • 6
  • 15
  • Yes, that is right: I am using MDC-web's node packages and I have them listed as dependencies in my `package.json`. – Richard Dec 22 '20 at 15:24