laravel - Laravel 的 Material 组件

Question

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

所以问题是如何将 google Material 组件(不是精简版)集成到 Laravel 项目中。

Answer 1

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

首先，安装默认的 Laravel 项目的 Node 依赖项，并确保安装了 node-sass 和 sass-loader，当然，还要添加 Material 组件网络:

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

然后，假设您在 resources/assets/scripts 文件夹中有一个 app.js，在 resources 中有一个 app.scss/assets/sass 文件夹中，您的 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 中，按照 MDC Web documentation 中所述的相同方式分别导入 ES2015 和 Sass .

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

npm i vue-mdc-adapter -S

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