WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.186 --> 00:00:05.016 align:middle Oh, before we talk about CSS, I forgot to mention 00:00:05.016 --> 00:00:10.496 align:middle that these public/build files do not need to be committed to your repository: 00:00:11.086 --> 00:00:14.406 align:middle we can rebuild them whenever we want from the source files. 00:00:15.236 --> 00:00:23.276 align:middle So inside .gitignore, add /public/build/* to make sure we don't commit them. 00:00:23.276 --> 00:00:25.816 align:middle Ok: onto something more important! 00:00:26.406 --> 00:00:27.976 align:middle Go to /login. 00:00:28.996 --> 00:00:34.666 align:middle Thanks to some JavaScript, if you type a really long username, a message pops up. 00:00:36.046 --> 00:00:40.346 align:middle The styling for this message comes from login.css. 00:00:40.916 --> 00:00:45.416 align:middle This is included in the template: login.html.twig. 00:00:46.606 --> 00:00:53.626 align:middle This makes sense: we have a script tag for login.js and also a link tag for login.css. 00:00:54.276 --> 00:00:59.956 align:middle But remember: I want you to start thinking about your JavaScript as an application... 00:01:00.556 --> 00:01:05.076 align:middle an application that can require its dependencies. 00:01:05.726 --> 00:01:10.846 align:middle And... isn't this CSS really a dependency of our app? 00:01:11.676 --> 00:01:18.556 align:middle I mean, if we forgot to include the CSS on this page, the application wouldn't break exactly... 00:01:18.866 --> 00:01:21.376 align:middle but it would look horrible! 00:01:21.746 --> 00:01:24.076 align:middle Honestly, it would look like I designed it. 00:01:24.896 --> 00:01:30.226 align:middle What I'm saying is: wouldn't it be cool if we could require CSS 00:01:30.226 --> 00:01:33.126 align:middle from right inside our JavaScript? 00:01:34.136 --> 00:01:35.346 align:middle Whelp... surprise! 00:01:35.726 --> 00:01:39.816 align:middle We can! Inside login.js, add require('.. 00:01:40.266 --> 00:01:43.476 align:middle /css/login.css'). 00:01:44.576 --> 00:01:47.026 align:middle We don't need to assign this to any variable. 00:01:47.806 --> 00:01:50.756 align:middle So... what the heck does that do? 00:01:51.526 --> 00:01:55.686 align:middle Does that somehow magically embed that CSS onto the page? 00:01:56.476 --> 00:01:58.686 align:middle Well, it's not that magic. 00:01:59.386 --> 00:02:03.186 align:middle Look inside the build/ directory - you may need to right click 00:02:03.246 --> 00:02:07.006 align:middle and select "Synchronize" to update it. 00:02:07.006 --> 00:02:12.106 align:middle Woh! Suddenly, there is a new login.css file... 00:02:12.716 --> 00:02:17.166 align:middle which contains all of the stuff from our source login.css! 00:02:18.546 --> 00:02:25.216 align:middle Here's what's happening: we point Webpack at our login entry file: login.js. 00:02:26.366 --> 00:02:30.866 align:middle Then, it parses all of the require statements inside. 00:02:30.866 --> 00:02:37.096 align:middle For any required JS files, it puts them in the final login.js. 00:02:37.936 --> 00:02:40.806 align:middle But it also parses the CSS files... 00:02:40.926 --> 00:02:46.726 align:middle and puts any CSS it finds into a final file - called login.css. 00:02:47.616 --> 00:02:52.196 align:middle Actually, it's a bit confusing: the name login.css comes 00:02:52.196 --> 00:02:55.916 align:middle from the name of the entry: login. 00:02:56.966 --> 00:03:02.066 align:middle Yep, each entry will cause one JavaScript file to be built and - 00:03:02.556 --> 00:03:09.426 align:middle if any of that JavaScript requires a CSS file - then it will also cause a CSS file 00:03:09.426 --> 00:03:12.286 align:middle to be created with the same name. 00:03:13.316 --> 00:03:20.686 align:middle Of course, to use this in the template, we still need one link tag pointed to build/login.css. 00:03:20.686 --> 00:03:24.166 align:middle Let's try it - refresh! 00:03:24.966 --> 00:03:26.326 align:middle If you type a long name... 00:03:26.766 --> 00:03:28.716 align:middle it works! And... 00:03:29.086 --> 00:03:29.776 align:middle bonus time! 00:03:30.376 --> 00:03:33.526 align:middle When we talk about creating a production build later, 00:03:33.946 --> 00:03:37.296 align:middle this CSS file will automatically be minified. 00:03:38.136 --> 00:03:40.616 align:middle So let's do this everywhere. 00:03:41.136 --> 00:03:46.156 align:middle Open layout.js and also the base layout: base.html.twig. 00:03:47.506 --> 00:03:54.626 align:middle Look at the top: we have a few css files, the first is main.css. 00:03:56.176 --> 00:03:58.466 align:middle In layout.js, require this: .. 00:03:59.906 --> 00:04:02.746 align:middle /css/main.css. 00:04:04.076 --> 00:04:08.556 align:middle As soon as we hit save, synchronize the build directory again... 00:04:09.876 --> 00:04:14.526 align:middle yes! We have a new layout.css file! 00:04:15.136 --> 00:04:19.136 align:middle In base.html.twig, update the link tag to use this. 00:04:24.506 --> 00:04:27.626 align:middle Yep... everything still looks fine. 00:04:28.246 --> 00:04:28.946 align:middle But... wait! 00:04:29.416 --> 00:04:32.266 align:middle Something amazing just happened! 00:04:33.446 --> 00:04:35.196 align:middle Look inside main.css. 00:04:36.276 --> 00:04:41.856 align:middle Woh! We're referencing a background image: .. 00:04:41.856 --> 00:04:45.456 align:middle /images/dumbell-mini.png. 00:04:46.136 --> 00:04:47.836 align:middle That's a problem! 00:04:48.586 --> 00:04:55.026 align:middle Why? Because the final file lives in a completely different directory, so that .. 00:04:55.316 --> 00:04:58.166 align:middle / path will break! 00:04:59.406 --> 00:05:00.316 align:middle Actually... 00:05:00.456 --> 00:05:02.016 align:middle it's not a problem! 00:05:02.736 --> 00:05:04.806 align:middle Webpack is amazing! 00:05:05.506 --> 00:05:10.476 align:middle It parses our CSS looking for any background images or fonts. 00:05:11.156 --> 00:05:16.576 align:middle When it finds one, it moves it into a build/images/ directory 00:05:16.886 --> 00:05:22.666 align:middle and rewrites the path inside the final CSS file to point there. 00:05:23.386 --> 00:05:29.016 align:middle The point is: all we need to do is write our CSS files correctly and... 00:05:29.476 --> 00:05:32.636 align:middle well... Webpack takes care of the rest! 00:05:34.836 --> 00:05:35.596 align:middle We're on a roll! 00:05:36.216 --> 00:05:41.556 align:middle There are two CSS files left in base.html.twig: Bootstrap and FontAwesome. 00:05:42.516 --> 00:05:44.806 align:middle You know the drill: require this! 00:05:45.786 --> 00:05:47.986 align:middle Remove the Bootstrap link tag first. 00:05:48.896 --> 00:05:58.046 align:middle In layout.js, above main.css, so that our CSS overrides their stuff, add require()... 00:05:58.186 --> 00:06:00.016 align:middle um... require... 00:06:00.016 --> 00:06:07.226 align:middle what? If we just require('bootstrap'), that will require the JavaScript file! 00:06:08.246 --> 00:06:11.786 align:middle So... how can we include CSS files? 00:06:12.906 --> 00:06:14.776 align:middle Look in the node_modules/ directory... 00:06:14.776 --> 00:06:16.986 align:middle and scroll down to find bootstrap. 00:06:17.886 --> 00:06:22.686 align:middle Ah, ok. Inside, there is a dist/ directory, then css/ and bootstrap.css. 00:06:22.686 --> 00:06:33.386 align:middle A little bit of explanation: when you require the name of a module, Node reads a special key 00:06:33.386 --> 00:06:41.756 align:middle in that package's package.json file called main to figure out which file to actually require. 00:06:42.576 --> 00:06:46.526 align:middle But, if you want to require a specific file... 00:06:47.016 --> 00:06:53.636 align:middle just do it: bootstrap/dist/css/bootstrap.css. 00:06:55.276 --> 00:07:00.196 align:middle This time, we don't need to make any other changes to base.html.twig: 00:07:00.756 --> 00:07:06.446 align:middle we already have a link tag for layout.css, which has everything we need. 00:07:07.456 --> 00:07:10.006 align:middle To prove it, go back and refresh! 00:07:12.776 --> 00:07:15.116 align:middle It's still beautiful! 00:07:19.676 --> 00:07:24.706 align:middle Yep, the built layout.css now has Bootstrap inside. 00:07:25.476 --> 00:07:30.166 align:middle And actually, Bootstrap itself references some fonts... 00:07:30.616 --> 00:07:34.376 align:middle and hey! There are now fonts in the build/ directory too! 00:07:35.046 --> 00:07:37.766 align:middle Those are handled just like background images. 00:07:38.946 --> 00:07:43.206 align:middle Ok: one more CSS file to remove: FontAwesome. 00:07:43.206 --> 00:07:44.876 align:middle It's getting easy now! 00:07:45.546 --> 00:07:47.166 align:middle Remove the link tag from the layout. 00:07:50.336 --> 00:07:56.156 align:middle Then, install that library: yarn add font-awesome@4 -- 00:07:56.376 --> 00:08:03.376 align:middle dev I added @4 to make sure we get the version compatible with this project. 00:08:03.726 --> 00:08:09.436 align:middle Oh, and how did I know to use font-awesome as the exact library name? 00:08:10.056 --> 00:08:16.006 align:middle I cheated: I already used npms.io before recording to find it. 00:08:17.776 --> 00:08:21.756 align:middle Back in layout.js, require font-awesome. 00:08:23.076 --> 00:08:26.726 align:middle Oh, but we need to find the exact file... 00:08:27.386 --> 00:08:29.936 align:middle in node_modules/font-awesome... 00:08:30.426 --> 00:08:37.496 align:middle ah! It looks like css/font-awesome.css: add that to the require. 00:08:38.916 --> 00:08:40.556 align:middle And Webpack is happy! 00:08:41.686 --> 00:08:44.576 align:middle Try it! Find the site and refresh! 00:08:47.176 --> 00:08:49.936 align:middle We still have our Bootstrap CSS and... 00:08:50.096 --> 00:08:54.156 align:middle yes! Our little user icon from FontAwesome is there! 00:08:55.096 --> 00:08:56.096 align:middle And on the homepage... 00:08:57.506 --> 00:09:01.346 align:middle yep! Those trash icons are from FontAwesome too! 00:09:02.686 --> 00:09:06.766 align:middle Now, our base.html.twig file looks great! 00:09:07.236 --> 00:09:10.126 align:middle We have one CSS file and one JS file. 00:09:10.946 --> 00:09:15.056 align:middle And all our dependencies are being required internally.