Компоненты материалов с Laravel

Согласно документации Google Material Components, я не могу найти способ интегрировать ее с Laravel . Описанные здесь шаги для настройки webpack указаны, однако я не могу найти подходящий способ поместить его в Laravel Mix.

Поэтому вопрос заключается в том, как интегрировать компоненты материала google (а не облегченную версию) в проект Laravel.

laravel,webpack,laravel-mix,material-components,material-components-web,

0

Ответов: 1


0

С Laravel Mix интеграция компонентов материалов проще, чем с простой конфигурацией Webpack.

Во-первых, установите зависимости Node по умолчанию в Laravel и убедитесь, что у вас есть node-sassи sass-loaderустановлены, и, конечно же, добавьте material-components-web:

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

Тогда, при условии , что у вас есть app.jsв resources/assets/scriptsпапке и app.scssв 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']
})

Затем, app.jsи app.scssимпортировать ES2015 и Sass соответственно таким же образом , как описано в веб - документации MDC .

Здесь я описал, как установить проект Vanilla JS. Если вас интересует Vue.js, вы можете добавить оболочку Vue.js для MDC-Web (Vue MDC Adapter):

npm i vue-mdc-adapter -S

Затем используйте его, как описано в документации Vue MDC Adapter .

Laravel, WebPack, Laravel-микс, материал-компонента, материал-компонента-веб,