时间戳

首页 > 解决方案 > Laravel 材质组件

laravel - Laravel 材质组件

问题描述

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

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

标签： laravelwebpacklaravel-mixmaterial-componentsmaterial-components-web

解决方案

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

node-sass首先，安装默认 Laravel 项目的 Node 依赖项，并确保您已经sass-loader安装，当然，添加material-components-web：

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

然后，假设你有一个app.jsinresources/assets/scripts文件夹和一个app.scssin文件resources/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']
})

然后，按照MDC Web 文档中描述的相同方式分别导入 ES2015 和app.jsSass 。app.scss

这里我描述了如何安装 Vanilla JS 项目。如果你对 Vue.js 感兴趣，那么你可以为 MDC-Web 添加 Vue.js 包装器（Vue MDC Adapter）：

npm i vue-mdc-adapter -S

然后，按照Vue MDC 适配器文档中的说明使用它。

推荐阅读