I am looking to use Laravel and Materialize css in one project. What is the best way to do this through sass files? I am looking to use laravel built into the webpack system. The website says that if you want to use SASS, here is the source, you will need a scss compiler. Thanks, very helpful. Not.
In this very detailed example, I will start with a new installation of laravel.
By 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 setting 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 materialization:
$ 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"})
Now there is a node_modules/materialize-css folder with a source in it. I want to use sass, so I will have more control over the framework if something changes for me. I could just create a webpack directly from node_modules/materialize-css/sass , but then any updates to materialize will 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/ :
$ cp -R . ../../../resources/assets/sass/
What 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 left by default bootstrap . materialize.scss is the main file of the sass file, and it loads the components from the components directory. ghpages-materialize.scss is a scss file for an example site only, so I'm not sure why it is here:
@charset "UTF-8"; // import materialize @import "materialize"; // Custom style @import "style";
So, to configure materializes the use of the final file _style.scss . In addition, underlining is not mentioned in the import. Obviously, underscores are ignored. I thought this was for the alphabet of the parts you are going to change, but apparently this just means its partial CSS. The fact that materialization is not part of css does not prevent it from being included in the same way. Anyway, I will delete files that I do not need:
$ rm ghpages-materialize.scss _variables.scss
_variables.scss intended for bootstrapping, and if necessary materializes in its components .
replace the old app.scss as follows:
// 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 $
Here's an ELIFECYCLE error, what that means , and some missing font files. Why does a web folder need font files? I did not talk about this. Perhaps they are mentioned somewhere in css, although a quick search could not find it. In any case, it looks like it is looking for fonts in a folder with a font just above node_modules.
$ cp -R node_modules/materialize-css/fonts/ ./fonts/
This copies the font directory to my laravel directory.
Then I will 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]
Think this means it worked? What is mix-manifest.json file for?
So now I have an app.css that should have everything I need. If I need to add my own styles, I can write and include _style.scss in app.scss . Is this the way it should work?
I do not want the fonts directory cluttering up my project directory, and I will never change the font files. Should they be publicly available or are they now included in the css file itself? How can I load fonts from materialized in node_modules?
Finally, is there anything about this process, as I introduced it, which should be simpler and less dirty?
But wait - I forgot JS!
How should javascript be used? Just dumped into the JS folder, or compiled and installed in one file, or in many files? I also do not see an easy way to do this.