What's the correct way to integrate Laravel and Materialize-CSS via Sass?

Question

I'm looking to use both Laravel and Materialize css in a single project. What's the best way to do this via the sass files? I'm looking to use laravel's built in webpack system. The website says if you want to use SASS, here's the source, you'll need an scss compiler. Thanks, very useful. Not.

For this very verbose example, I'll start with a fresh laravel install.

Default 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');

This default configuration works:

$ 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]

But I want to use materialize:

$ npm install materialize-css --save-dev
/home/vagrant/Code/laravel
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]

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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Now there's a folder node_modules/materialize-css with the source in it. I want to use the sass so I'll have greater control over the framework, if I need something changed. I could just build with webpack directly from node_modules/materialize-css/sass, but then any updates to materialize would overwrite my changes. So I need to copy the sass files from node_modules/sass to resources/assets/sass.

I do this from the node_modules/materialize-css/sass/ directory:

$ cp -R . ../../../resources/assets/sass/

Which works:

vagrant@homestead:~/Code/laravel/resources/assets/sass$ ls
app.scss  components  ghpages-materialize.scss  materialize.scss  _style.scss  _variables.scss

app.scss and _variables.scss are leftover from the default bootstrap setup. materialize.scss is the framework's main sass file, and it loads components from the components directory. ghpages-materialize.scss is the scss file just for the example site, so I'm not sure why it's included here:

@charset "UTF-8";

// import materialize
@import "materialize";

// Custom style
@import "style";

So it appears to be using the final file, _style.scss, for customizing materialize. Also, the underscore is not mentioned in the import. Apparently underscores are ignored. I thought that was for alphabetization of the parts you're going to change, but apparently it just means its a css partial. The fact that materialize isn't a css partial doesn't stop it from being included the same way. Anyway, I'll remove the files I don't need:

$ rm ghpages-materialize.scss _variables.scss

The _variables.scss is for bootstrap, and materialize has its own in components if necessary.

replace the old app.scss with this:

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Materialize
@import "materialize";

And try running webpack again:

$ 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
$

There's an ELIFECYCLE error, whatever that means, and some missing font files. Why does webpack need the font files? I didn't tell it about them. Perhaps they're mentioned somewhere in the css, although a quick search couldn't find it. Anyway, it appears to be looking for the fonts in a font folder just above node_modules.

$ cp -R node_modules/materialize-css/fonts/ ./fonts/

This copies the fonts directory to my laravel directory.

Then, I try webpack again:

$ 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]

I guess that means it worked? What is the mix-manifest.json file for?

So now I have an app.css which should have everything I need. If I need to add my own custom styles, I can write and include _style.scss in app.scss. Is that the way this is supposed to work?

I don't want the fonts directory cluttering my project directory, though, and I'm never going to change the font files. Are they supposed to be public, or are they now included in the css file itself? How can I load the fonts from materialize in node_modules instead?

Finally, is there anything about this process the way I've presented it which is supposed to be easier and less messy than that?

But wait - I forgot the JS!

How is the javascript meant to be used? Just dumped in a JS folder, or compiled and minified into one file, or into many files? I don't see an easy way to do that, either.

Answer 1

To pull in materialize from node modules, in your resources/sass/app.scss file import it like this

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

and then for the javascript you will edit your resources/js/bootstrap.js file to say

 require('materialize-sass');