How to configure material components web with laravel-mix? - laravel

Question

I use mdc with laravel-mix but it's not loading scss files from node modules.
I tried some other solutions about giving includepaths in mix.sass, but they are not working.
I tried code in webpack.mix.js
const path = require('path');
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
includePaths: ['./node_modules']
});
but its still giving me same error that
undefined
^
Can't find stylesheet to import. #import "#material/elevation/mixins";

Answer 1

For Laravel 6 I had to do it this way:
npm install --save material-components-web
app.scss:
#import "material-components-web/material-components-web";
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: ['./node_modules']
}
});

Answer 2

Yes, answer from Edmund Sulzanok is correct, add sassOptions but for me too:
Laravel VERSION = '6.7.0';
I had to upgrade npm package.json devDependencies
"devDependencies": {
...
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.1",
...,
"resolve-url-loader": "^3.1.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
...
},
"dependencies": {
...
"material-components-web": "^4.0.0",
...
}
After modify package.json run npm install
npm install
You could see Packages outdated with
npm outdated
good luck