如何使用 laravel-mix 配置材料组件 web？答案

【问题标题】：How to configure material components web with laravel-mix?如何使用 laravel-mix 配置材料组件 web？
【发布时间】：2019-06-13 22:21:20
【问题描述】：

我将 mdc 与 laravel-mix 一起使用，但它没有从节点模块加载 scss 文件。我尝试了一些关于在 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

【解决方案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']
    }
});

【讨论】：

无论 laravel 框架版本如何，这都是 laravel-mix v5 的正确语法。

【解决方案2】：

是的，Edmund Sulzanok 的回答是正确的，添加 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

祝你好运

【讨论】：