WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.076 --> 00:00:04.456 align:middle We now have a nice new JavaScript and CSS system 00:00:04.456 --> 00:00:07.586 align:middle that lives entirely inside of the assets/ directory. 00:00:08.376 --> 00:00:10.356 align:middle Let's move our public styles into this. 00:00:11.076 --> 00:00:17.506 align:middle Open public/styles/app.css, copy all of this, delete the entire directory... 00:00:17.936 --> 00:00:20.416 align:middle and then paste into the new app.css. 00:00:20.416 --> 00:00:29.116 align:middle Thanks to the encore_entry_link_tags() in base.html.twig, the new CSS is being included... 00:00:29.246 --> 00:00:31.806 align:middle and we don't need the old link tag anymore. 00:00:32.906 --> 00:00:33.496 align:middle Go check it out. 00:00:34.326 --> 00:00:35.636 align:middle Refresh and... 00:00:35.936 --> 00:00:37.576 align:middle it still looks great! 00:00:38.426 --> 00:00:40.736 align:middle Go back to base.html.twig. 00:00:41.426 --> 00:00:45.876 align:middle What about these external link tags for bootstrap and FontAwesome? 00:00:46.686 --> 00:00:49.766 align:middle Well, you can totally keeps these CDN links. 00:00:50.216 --> 00:00:53.676 align:middle But we can also process this stuff through Encore. 00:00:54.456 --> 00:01:01.096 align:middle How? By installing Bootstrap and FontAwesome as vendor libraries and importing them. 00:01:01.956 --> 00:01:03.546 align:middle Remove all of these link tags... 00:01:03.726 --> 00:01:05.186 align:middle and then refresh. 00:01:07.406 --> 00:01:11.356 align:middle Yikes! It's back to looking like I designed this site. 00:01:12.066 --> 00:01:14.096 align:middle Let's... first re-add bootstrap. 00:01:14.686 --> 00:01:15.676 align:middle Find your terminal. 00:01:16.586 --> 00:01:20.596 align:middle Since the watch command is running, open a new terminal tab and then run: 00:01:20.776 --> 00:01:26.696 align:middle yarn add bootstrap -- dev This does three things. 00:01:27.656 --> 00:01:31.116 align:middle First, it adds bootstrap to our package.json file. 00:01:32.356 --> 00:01:36.316 align:middle Second it downloads bootstrap into our node_modules/ directory... 00:01:36.566 --> 00:01:37.756 align:middle you would find it down here. 00:01:39.236 --> 00:01:44.306 align:middle And third, it updated the yarn.lock file with the exact version 00:01:44.306 --> 00:01:46.526 align:middle of bootstrap that it just downloaded. 00:01:47.656 --> 00:01:48.606 align:middle If we stopped now... 00:01:49.096 --> 00:01:51.276 align:middle this wouldn't make any difference! 00:01:51.636 --> 00:01:56.366 align:middle We downloaded bootstrap - yay - but we're not using it. 00:01:57.226 --> 00:01:59.876 align:middle To use it, we need to import it. 00:02:00.546 --> 00:02:02.196 align:middle Go into app.css. 00:02:03.516 --> 00:02:09.056 align:middle Just like in JavaScript files, we can import from inside CSS files 00:02:09.126 --> 00:02:11.976 align:middle by saying @import and then the file. 00:02:12.736 --> 00:02:15.356 align:middle We could reference a file in the same directory with . 00:02:15.356 --> 00:02:17.446 align:middle /other-file.css. 00:02:17.926 --> 00:02:24.196 align:middle Or, if you want to import something from the node_modules/ directory in CSS, there's a trick: 00:02:24.446 --> 00:02:28.146 align:middle a ~ and then the package name: bootstrap. 00:02:28.686 --> 00:02:29.566 align:middle That's it! 00:02:30.216 --> 00:02:36.216 align:middle As soon as we did that, Encore's watch function rebuilt our app.css file... 00:02:36.466 --> 00:02:39.016 align:middle which now includes Bootstrap! 00:02:39.456 --> 00:02:41.786 align:middle Watch: refresh the page and... 00:02:42.456 --> 00:02:43.616 align:middle we're back! 00:02:43.746 --> 00:02:49.766 align:middle So cool! The two other things we're missing are FontAwesome and a specific Font. 00:02:50.566 --> 00:02:59.476 align:middle To add those, head back to the terminal and run: yarn add @fontsource/roboto-condensed -- 00:02:59.476 --> 00:03:05.186 align:middle dev Full disclosure: I did some searching before recording 00:03:05.396 --> 00:03:08.716 align:middle so that I knew the names of all the packages we need. 00:03:09.486 --> 00:03:13.276 align:middle You can search for packages at https://npmjs.com. 00:03:14.546 --> 00:03:20.826 align:middle Let's also add the last one we need: yarn add @fortawesome/fontawesome-free -- 00:03:20.896 --> 00:03:27.216 align:middle dev Again, this downloaded the two libraries into our project... 00:03:27.316 --> 00:03:30.046 align:middle but doesn't automatically use them yet. 00:03:30.816 --> 00:03:37.716 align:middle Because those libraries both hold CSS files, go back to our app.css file and import them: 00:03:38.346 --> 00:03:43.626 align:middle @import '~' then @fortawesome/fontawesome-free. 00:03:44.666 --> 00:03:49.506 align:middle And @import '~@fontsource/roboto-condensed'. 00:03:50.216 --> 00:03:52.966 align:middle The first package should fix this icon... 00:03:53.286 --> 00:03:57.066 align:middle and the second should cause the font to change on the whole page. 00:03:57.796 --> 00:03:59.836 align:middle Watch the font when we refresh... 00:04:00.636 --> 00:04:02.016 align:middle it did change! 00:04:02.416 --> 00:04:02.886 align:middle But, uh... 00:04:02.936 --> 00:04:06.026 align:middle the icons are still kind of broken. 00:04:07.076 --> 00:04:11.236 align:middle To be totally honest, I'm not sure why that doesn't work out-of-the box. 00:04:11.286 --> 00:04:13.316 align:middle But the fix is kind of interesting. 00:04:14.336 --> 00:04:20.366 align:middle Hold command on a Mac - or ctrl otherwise - and click this fontawesome-free string. 00:04:21.326 --> 00:04:26.286 align:middle When you use this syntax, it goes into your node_modules/ directory, 00:04:26.626 --> 00:04:30.036 align:middle into @fortawesome/fontawesome-free... 00:04:30.546 --> 00:04:36.026 align:middle and then if you don't put any filename after this, there's a mechanism 00:04:36.206 --> 00:04:41.586 align:middle where this library tells Webpack which CSS file it should import. 00:04:42.316 --> 00:04:46.306 align:middle By default, it imports this fontawesome.css file. 00:04:47.036 --> 00:04:48.256 align:middle For some reason... 00:04:48.316 --> 00:04:49.566 align:middle that doesn't work. 00:04:50.116 --> 00:04:52.906 align:middle What we want is this all.css. 00:04:53.446 --> 00:05:00.176 align:middle And we can import that by adding the path: /css/all.css. 00:05:00.686 --> 00:05:05.226 align:middle We don't need the minified file because Encore handles minifying for us. 00:05:06.136 --> 00:05:06.876 align:middle And now... 00:05:07.606 --> 00:05:08.876 align:middle we're back! 00:05:09.676 --> 00:05:14.086 align:middle The main reason I love Webpack Encore and this system is 00:05:14.086 --> 00:05:16.966 align:middle that it allows us to use proper imports. 00:05:17.796 --> 00:05:23.976 align:middle We can even organize our JavaScript into small files - putting classes or functions into each - 00:05:24.446 --> 00:05:26.876 align:middle and then import them when we need them. 00:05:27.486 --> 00:05:30.356 align:middle There's no more need for global variables. 00:05:31.116 --> 00:05:37.396 align:middle Webpack also allows us to use more serious stuff like React or Vue: you can even see, 00:05:37.566 --> 00:05:41.466 align:middle in webpack.config.js, the methods to activate those. 00:05:42.096 --> 00:05:48.116 align:middle But usually, I like using a delightful JavaScript library called Stimulus. 00:05:48.596 --> 00:05:50.626 align:middle And I want to tell you about it next.