sass - 通过 Sass 集成 Laravel 和 Materialise-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]

但我想使用materialize:

$ 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 进行构建，但是任何对 Materialize 的更新都会覆盖我的更改。因此，我需要将 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来自定义具体化。此外，导入中未提及下划线。显然下划线被忽略了。我以为这是为了按字母顺序排列您要更改的部分，但显然 it just means its a css partial 。 Materialize 不是 css 部分这一事实并不能阻止它以同样的方式被包含。无论如何，我会删除不需要的文件:

$ rm ghpages-materialize.scss _variables.scss

_variables.scss 用于 Bootstrap ，如果需要，Materialize 在 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，它应该包含我需要的一切。如果我需要添加自己的自定义样式，我可以在 app.scss 中编写并包含 _style.scss。这是应该的工作方式吗？

不过，我不希望字体目录弄乱我的项目目录，而且我永远不会更改字体文件。它们应该是公开的，还是现在包含在 css 文件本身中？ 如何从node_modules中的materialize加载字体？

最后，关于这个过程，我所呈现的方式是否有什么比这更容易、更不那么困惑的地方？

但是等等 - 我忘记了 JS!

怎么样the javascript意味着要使用？只是转储到 JS 文件夹中，还是编译并缩小为一个文件，或多个文件？我也没有找到一个简单的方法来做到这一点。

Answer 1

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

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

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

 require('materialize-sass');