Как настроить веб-компоненты материалов с помощью laravel-mix?

Я использую mdc с laravel-mix, но он не загружает файлы scss из узловых модулей. Я пробовал некоторые другие решения о предоставлении includepaths в mix.sass, но они не работают.

Я пробовал код в 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']
});

но он все еще дает мне ту же ошибку, что и

 undefined
        ^
       Can't find stylesheet to import. @import "@material/elevation/mixins";

laravel material-components-web
person kei nagae    schedule 20.01.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Для Laravel 6 мне пришлось сделать это так:

npm install --save material-components-web

app.scss: @import "material-components-web/material-components-web";

веб-пакет.mix.js:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
    sassOptions: {
        includePaths:  ['./node_modules']
    }
});
person Edmund Sulzanok    schedule 22.01.2020
comment
Это правильный синтаксис для laravel-mix v5 независимо от версии фреймворка laravel. - person Andrew Mellor; 13.05.2020

arrow_upward
1
arrow_downward

Да, ответ Эдмунда Сульзанока правильный, добавьте sassOptions, но и для меня тоже:

ВЕРСИЯ Laravel = '6.7.0';

Мне пришлось обновить 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",
    ...
}

После изменения package.json запустите npm install

npm install

Вы могли видеть, что пакеты устарели с

npm outdated

удачи

person muu    schedule 25.01.2020