7

我希望在一个项目中同时使用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 partial。materialize 不是 css 部分的事实并不能阻止它以相同的方式被包含。无论如何，我将删除我不需要的文件：

$ rm ghpages-materialize.scss _variables.scss

_variables.scss用于引导程序，components如果需要， materialize 有它自己的。

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

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

最后，这个过程有什么我提出的方式应该比这更容易和更少混乱吗？

但是等等 - 我忘记了 JS！

javascript是如何使用的？只是转储到一个 JS 文件夹中，还是编译并缩小到一个文件中，或者到多个文件中？我也没有看到一个简单的方法来做到这一点。

4

2 回答 2

3

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

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

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

 require('materialize-sass');
于 2017-06-14T15:36:45.570 回答
-5

要看。你想使用 sass 版本，还是预编译版本？

如果是预编译的，只需在主视图中添加链接，就像添加任何其他 css/js 文件一样。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

如果是 sass 版本，请遵循 npm 的物化文档并将其添加到您的混合文件中。https://laravel.com/docs/5.6/mix

https://materializecss.com/getting-started.html

于 2020-05-28T15:26:39.903 回答