通过Sass集成Laravel和Materialize-CSS的正确方法是什么？

Question

我想在一个项目中使用Laravel和Materialize 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,所以如果我需要改变一些东西,我将对框架有更大的控制权.我可以直接使用webpack构建node_modules/materialize-css/sass,但是实现的任何更新都会覆盖我的更改.所以我需要将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是默认引导程序设置的剩余部分. 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是引导和兑现拥有自己的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/

这会将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!

如何使用javascript？只是转储到一个JS文件夹中,或者编译并缩小为一个文件,或者转换成许多文件？我也没有看到一种简单的方法.

Answer 1

要从节点模块中提取具体化，请在 resources/sass/app.scss 文件中像这样导入它

// Materialize
@import "node_modules/materialize-css/sass/materialize";

然后对于 javascript，你将编辑 resources/js/bootstrap.js 文件来说明

 require('materialize-sass');