Material 个组件Laravel

Question

根据 Google Material 组件的文档，我无法找到将其与 Laravel 集成的方法。提到了那里提到的配置 webpack 的步骤，但是我找不到合适的方法将其放入 Laravel Mix.

所以问题是如何将 google material 组件（不是精简版）集成到 Laravel 项目中。

Answer 1

使用 Laravel Mix，Material 组件的集成比普通 Webpack 配置更容易。

首先，安装默认的 Laravel 项目的 Node 依赖项，并确保安装了 node-sass 和 sass-loader，当然还要添加 material-components-web:

npm i
npm i node-sass sass-loader -D
npm i material-components-web -S

然后，假设您在 resources/assets/scripts 文件夹中有一个 app.js，在 resources/assets/sass 文件夹中有一个 app.scss，您的 webpack.mix.js 应该如下所示：

const mix = require('laravel-mix')

mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
  includePaths: ['node_modules']
})

然后，在 app.js 和 app.scss 中分别导入 ES2015 和 Sass，方法与 MDC Web documentation.

中描述的相同

这里我介绍了如何安装Vanilla JS项目。如果你对 Vue.js 感兴趣，那么你可以添加 Vue.js wrapper for MDC-Web (Vue MDC Adapter):

npm i vue-mdc-adapter -S

然后，按照Vue MDC Adapter documentation中的描述使用它。

Material 个组件Laravel

Material Components with Laravel

laravel

webpack

laravel-mix

material-components

material-components-web