Я ищу использовать как Laravel, так и Materialize css в одном проекте. Каков наилучший способ сделать это через sass-файлы? Я ищу использовать встроенную систему web-пакетов laravel. На сайте говорится, что если вы хотите использовать SASS, вот источник, вам понадобится компилятор scss. Спасибо, очень полезно. Не.Каков правильный способ интеграции Laravel и Materialize-CSS через Sass?
Для этого очень подробного примера, я начну с новой установки laravel.
По умолчанию 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');
Эта конфигурация по умолчанию работает:
$ npm run dev
DONE Compiled successfully in 4287ms 11:19:15 PM
Asset Size Chunks Chunk Names
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
/css/app.css 686 kB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
Но я хочу использовать материализовать:
$ npm install materialize-css --save-dev
/home/vagrant/Code/laravel
└─┬ [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
Теперь есть папка с node_modules/materialize-css источник в нем. Я хочу использовать sass, поэтому я буду иметь больший контроль над фреймворком, если мне что-то изменится. Я мог бы просто построить с помощью webpack непосредственно с node_modules/materialize-css/sass, но тогда любые обновления для материализации будут перезаписывать мои изменения. Поэтому мне нужно скопировать файлы sass от node_modules/sass до resources/assets/sass.
Я делаю это из каталога node_modules/materialize-css/sass/:
$ cp -R . ../../../resources/assets/sass/
Который работает:
[email protected]:~/Code/laravel/resources/assets/sass$ ls
app.scss components ghpages-materialize.scss materialize.scss _style.scss _variables.scss
app.scss и _variables.scss являются пережитком bootstrap настройки по умолчанию. materialize.scss является основным файлом sass файла, и он загружает компоненты из каталога components. ghpages-materialize.scss является файлом СКС только для примера сайта, поэтому я не знаю, почему он включен здесь:
@charset "UTF-8";
// import materialize
@import "materialize";
// Custom style
@import "style";
Так что, похоже, использует конечный файл, _style.scss для настройки материализовать. Кроме того, подчеркивание не упоминается в импорте. Очевидно, подчеркивания игнорируются. Я думал, что это было для алфавита частей, которые вы собираетесь изменить, но, видимо, it just means its a css partial. Тот факт, что материализация не является частью css, не мешает ему быть включенным таким же образом. Во всяком случае, я буду удалять файлы не нужно:
$ rm ghpages-materialize.scss _variables.scss
_variables.scss для начальной загрузки, и материализовать имеет свой собственный components, если это необходимо.
заменить старый app.scss с этим:
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Materialize
@import "materialize";
И попробуйте запустить WebPack снова:
$ npm run dev
ERROR Failed to compile with 20 errors 12:14:06 AM
These dependencies were not found in node_modules:
* ../fonts/roboto/Roboto-Thin.eot
* ../fonts/roboto/Roboto-Thin.woff2
* ../fonts/roboto/Roboto-Thin.woff
* ../fonts/roboto/Roboto-Thin.ttf
* ../fonts/roboto/Roboto-Light.eot
* ../fonts/roboto/Roboto-Light.woff2
* ../fonts/roboto/Roboto-Light.woff
* ../fonts/roboto/Roboto-Light.ttf
* ../fonts/roboto/Roboto-Regular.eot
* ../fonts/roboto/Roboto-Regular.woff2
* ../fonts/roboto/Roboto-Regular.woff
* ../fonts/roboto/Roboto-Regular.ttf
* ../fonts/roboto/Roboto-Medium.eot
* ../fonts/roboto/Roboto-Medium.woff2
* ../fonts/roboto/Roboto-Medium.woff
* ../fonts/roboto/Roboto-Medium.ttf
* ../fonts/roboto/Roboto-Bold.eot
* ../fonts/roboto/Roboto-Bold.woff2
* ../fonts/roboto/Roboto-Bold.woff
* ../fonts/roboto/Roboto-Bold.ttf
Did you forget to run npm install --save for them?
Asset Size Chunks Chunk Names
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/Code/laravel/resources/assets/sass/npm-debug.log
$
Там в ELIFECYCLE ошибок, whatever that means и некоторые недостающие файлы шрифта. Почему веб-папке нужны файлы шрифтов? Я не рассказал об этом. Возможно, они упоминаются где-то в css, хотя быстрый поиск не смог найти его.В любом случае, похоже, он ищет шрифты в папке с шрифтом чуть выше node_modules.
$ cp -R node_modules/materialize-css/fonts/ ./fonts/
Это копирует каталог шрифтов в мой каталог laravel.
Затем я WebPack попробовать еще раз:
$ npm run dev DONE Compiled successfully in 3772ms 12:24:24 AM
Asset Size Chunks Chunk Names
fonts/Roboto-Medium.ttf?894a2ede85a483bf9bedefd4db45cdb9 127 kB [emitted]
fonts/Roboto-Bold.eot?ecdd509cadbf1ea78b8d2e31ec52328c 21 kB [emitted]
fonts/Roboto-Medium.eot?4d9f3f9e5195e7b074bb63ba4ce42208 21.4 kB [emitted]
fonts/Roboto-Regular.eot?30799efa5bf74129468ad4e257551dc3 21.3 kB [emitted]
fonts/Roboto-Thin.eot?dfe56a876d0282555d1e2458e278060f 21.7 kB [emitted]
fonts/Roboto-Bold.ttf?e31fcf1885e371e19f5786c2bdfeae1b 128 kB [emitted]
fonts/Roboto-Bold.woff?dc81817def276b4f21395f7ea5e88dcd 62.9 kB [emitted]
fonts/Roboto-Bold.woff2?39b2c3031be6b4ea96e2e3e95d307814 50 kB [emitted]
fonts/Roboto-Light.ttf?46e48ce0628835f68a7369d0254e4283 127 kB [emitted]
fonts/Roboto-Light.woff?3b813c2ae0d04909a33a18d792912ee7 62.3 kB [emitted]
fonts/Roboto-Light.woff2?69f8a0617ac472f78e45841323a3df9e 49.4 kB [emitted]
fonts/Roboto-Light.eot?a990f611f2305dc12965f186c2ef2690 20.9 kB [emitted]
fonts/Roboto-Medium.woff?fc78759e93a6cac50458610e3d9d63a0 63 kB [emitted]
fonts/Roboto-Medium.woff2?574fd0b50367f886d359e8264938fc37 50.2 kB [emitted]
fonts/Roboto-Regular.ttf?df7b648ce5356ea1ebce435b3459fd60 126 kB [emitted]
fonts/Roboto-Regular.woff?ba3dcd8903e3d0af5de7792777f8ae0d 61.7 kB [emitted]
fonts/Roboto-Regular.woff2?2751ee43015f9884c3642f103b7f70c9 49.2 kB [emitted]
fonts/Roboto-Thin.ttf?94998475f6aea65f558494802416c1cf 128 kB [emitted]
fonts/Roboto-Thin.woff?7500519de3d82e33d1587f8042e2afcb 61.6 kB [emitted]
fonts/Roboto-Thin.woff2?954bbdeb86483e4ffea00c4591530ece 48.5 kB [emitted]
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
/css/app.css 570 kB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
Я предполагаю, что означает, что он работал? Для чего используется файл mix-manifest.json?
Итак, теперь у меня есть app.css, который должен иметь все, что мне нужно. Если мне нужно добавить свои собственные стили, я могу написать и включить _style.scss в app.scss. Так ли это должно работать?
Я не хочу, чтобы каталог шрифтов загромождал мою директорию проектов, и я никогда не буду менять файлы шрифтов. Должны ли они быть общедоступными или теперь они включены в сам файл css? Как я могу загрузить шрифты из материализованного в node_modules?
И, наконец, есть ли что-нибудь об этом процессе, как я представил его, который должен быть проще и менее грязным?
Но подождите - я забыл JS!
0 Как есть the javascript предназначенный для использования? Просто свалили в папку JS, или скомпилировали и проинсталлировали в один файл, или во множество файлов? Я тоже не вижу простого способа сделать это.