我希望在一个项目中同时使用laravel并实现CSS。通过SASS文件来执行此操作的最佳方法是什么？我希望使用Laravel内置的WebPack系统。该网站说，如果您想使用SASS，这是来源，您需要SCSS编译器。谢谢，非常有用。不是。
对于这个冗长的例子，我将从新的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
└─┬ materialize-css@0.98.0
├── hammerjs@2.0.8
├── jquery@2.2.4
└── node-archiver@0.3.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
现在有一个文件夹node_modules/materialize-css，其中包含源。我想使用SASS，因此如果需要更改的东西，我将对框架有更大的控制权。我可以直接从node_modules/materialize-css/sass直接使用WebPack构建，但是任何实现的更新都会覆盖我的更改。因此，我需要将SASS文件从node_modules/sass复制到resources/assets/sass。
我从node_modules/materialize-css/sass/目录中执行此操作：
$ cp -R . ../../../resources/assets/sass/
有效的工作：
vagrant@homestead:~/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来自定义物质化。另外，导入中没有提及下划线。显然，下划线被忽略。我认为这是为了将要更改的零件的字母顺序排列，但显然这意味着它的CSS部分。物质化不是CSS部分的事实并不能阻止它以相同的方式包含。无论如何，我将删除我不需要的文件：
$ rm ghpages-materialize.scss _variables.scss
_variables.scss适用于bootstrap，必要时物质化在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错误，无论是什么意思，还有一些丢失的字体文件。为什么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，应该拥有我需要的一切。如果我需要添加自己的自定义样式，则可以在app.scss中编写并包含_style.scss。那应该是这样吗？
我不希望字体目录使我的项目目录混乱，我永远不会更改字体文件。他们应该是公开的，还是现在包括在CSS文件本身中？如何改用node_modules中的物质加载字体？
最后，关于这个过程，我是否有什么方式来表明它应该比这更容易且不那么凌乱？
但是等等 - 我忘记了JS！
JavaScript如何使用？刚刚将其倒入JS文件夹，或将其汇编并缩小到一个文件中，还是将其汇总到许多文件中？我也看不到这样做的简单方法。
从节点模块，在您的资源/sass/app.scss file中提取物质化，例如
// Materialize
@import "node_modules/materialize-css/sass/materialize";
然后，对于JavaScript，您将编辑您的资源/JS/Bootstrap.js文件
require('materialize-sass');