如何使用laravel-mix配置材料成分网?

时间:2019-01-20 07:50:08

标签: laravel components material mdc

我在laravel-mix中使用了mdc,但是它没有从节点模块中加载scss文件。 我尝试了其他一些在mix.sass中提供includepath的解决方案,但是它们不起作用。

我尝试了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";

2 个答案:

答案 0 :(得分:1)

对于Laravel 6,我必须这样做:

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']
    }
});

答案 1 :(得分:1)

是的,埃德蒙·苏尔扎诺克(Edmund Sulzanok)的回答是正确的,但也添加了sassOptions:

Laravel VERSION ='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

祝你好运