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 //github.com/webpack-contrib/sass-loader/issues/802)

Expected Behavior

No build errors

How Do We Reproduce?

  1. Clone //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

Related Posts

Toplist

Latest post

TAGs