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文件夹，或编译和缩小成一个文件，或成多个文件？我也没有看到一个简单的方法来做到这一点。