Sasserror: cant find stylesheet to import.

Sass Error: cant find stylesheet to import when @use-ing MDC Webs button using Gulp

Questions : Sass Error: cant find stylesheet to import when @use-ing MDC Webs button using Gulp

2022-10-10T17:52:03+00:00 2022-10-10T17:52:03+00:00

875

I have these two lines of code in my anycodings_mdc-components 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 anycodings_mdc-components main.scss file to a single build.css file. anycodings_mdc-components My main.scss file compiles just fine when I anycodings_mdc-components 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 anycodings_mdc-components .scss files. How can I fix the error?

Total Answers 1

26

Answers 1 : of Sass Error: cant find stylesheet to import when @use-ing MDC Webs button using Gulp

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

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

0

2022-10-10T17:52:03+00:00 2022-10-10T17:52:03+00:00Answer Link

mRahman

Bug report

Actual Behavior

Build error with Yarn 3 & @use or @include usage (related to https://github.com/webpack-contrib/sass-loader/issues/802)

Expected Behavior

No build errors

How Do We Reproduce?

1. Clone https://github.com/Lonli-Lokli/yarn_pnp_scss
2. yarn install
3. yarn build

✔ Browser application bundle generation complete.

./src/styles.scss - Error: Module build failed (from ./.yarn/__virtual__/sass-loader-virtual-01a772c5dc/0/cache/sass-loader-npm-12.6.0-19096ee50d-5d73a42858.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @include meta.load-css('tippy.js/dist/tippy.css');
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles.scss 5:1  root stylesheet

Same code with @import works

// DO NOT WORK
@use 'sass:meta';

@include meta.load-css('tippy.js/dist/tippy.css');
@include meta.load-css('tippy.js/themes/light.css');
@include meta.load-css('tippy.js/animations/scale.css');

// WORKS
// @import 'tippy.js/dist/tippy.css';
// @import 'tippy.js/themes/light.css';
// @import 'tippy.js/animations/scale.css';

System info

System:
   OS: Windows 10 10.0.22000
   CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
   Memory: 8.64 GB / 15.78 GB
 Binaries:
   Node: 14.18.2 - C:\Program Files\nodejs\node.EXE
   Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
   npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
 Browsers:
   Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.71)
   Internet Explorer: 11.0.22000.120

Angular CLI: 14.0.6
Node: 14.18.2
Package Manager: yarn 3.2.1
OS: win32 x64

Angular: 14.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.6 (cli-only)
@angular-devkit/build-angular   14.0.6
@angular-devkit/core            14.0.6 (cli-only)
@angular-devkit/schematics      14.0.6 (cli-only)
@schematics/angular             14.0.6 (cli-only)
rxjs                            7.5.6
typescript                      4.7.4