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.
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?
- Clone //github.com/Lonli-Lokli/yarn_pnp_scss
- yarn install
- yarn build
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';