6
我期待在單個項目中同時使用Laravel和Materialize css。通過sass文件做到這一點的最佳方式是什麼？我正在尋找使用laravel內置的webpack系統。該網站說如果你想使用SASS，這裏是源代碼，你需要一個scss編譯器。謝謝，非常有用。不。通過Sass集成Laravel和Materialize-CSS的正確方法是什麼？
對於這個非常詳細的例子，我將從一個新的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，這樣我就可以更好地控制框架。我可以直接從node_modules/materialize-css/sass直接使用webpack構建，但是任何更新都會覆蓋我的更改。所以我需要將node_modules/sass的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僅僅是示例站點的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，有的缺少的字體文件。爲什麼webpack需要字體文件？我沒有告訴它們。也許他們在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中的materialize載入字體？
最後，有沒有關於這個過程的任何方式，我已經提出了它應該是比這更容易，更不混亂的方式？
但等等 - 我忘了JS！
the javascript如何使用？只是傾倒在一個JS文件夾，或編譯和縮小成一個文件，或成多個文件？我也沒有看到一個簡單的方法來做到這一點。