WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.106 --> 00:00:06.146 align:middle There are only two files left in the public/ directory, and they're both CSS files! 00:00:06.466 --> 00:00:09.676 align:middle Celebrate by crushing your js/ directory. 00:00:09.676 --> 00:00:14.516 align:middle We have two page-specific CSS files left. 00:00:14.516 --> 00:00:16.856 align:middle Open account/index.html.twig. 00:00:18.006 --> 00:00:20.206 align:middle Yep, this has a link tag to the first... 00:00:20.556 --> 00:00:24.926 align:middle and in security/login.html.twig, here's the other. 00:00:26.576 --> 00:00:31.756 align:middle Oh, and we also include login.css from register.html.twig. 00:00:32.626 --> 00:00:34.906 align:middle This is kind of a tricky situation.... 00:00:35.356 --> 00:00:41.656 align:middle because what Webpack wants you to do is always start with a JavaScript entry file. 00:00:42.146 --> 00:00:48.246 align:middle And of course, if you happen to import some CSS, it'll nicely dump a CSS file. 00:00:48.946 --> 00:00:54.546 align:middle This comes from the single-page application mindset: if everything in your app is built 00:00:54.546 --> 00:00:58.576 align:middle by JavaScript, then of course you have a JavaScript file! 00:00:59.326 --> 00:01:00.556 align:middle So... hmm. 00:01:00.556 --> 00:01:06.636 align:middle I mean, we could leave those files in public/ - we don't need them to go through Webpack. 00:01:06.846 --> 00:01:08.996 align:middle Though... I would like to use Sass. 00:01:09.486 --> 00:01:13.606 align:middle We could also create account.js and login.js files... 00:01:13.606 --> 00:01:16.956 align:middle and then just import each CSS file from inside. 00:01:17.616 --> 00:01:18.276 align:middle That would work... 00:01:18.576 --> 00:01:23.276 align:middle but then Webpack would output empty account.js and login.js files... 00:01:23.276 --> 00:01:26.386 align:middle which isn't horrible, but not ideal... 00:01:26.436 --> 00:01:27.336 align:middle and kinda weird. 00:01:28.246 --> 00:01:34.036 align:middle In the Encore world, just like with Webpack, we really do want you to try to do it the 00:01:34.126 --> 00:01:39.426 align:middle "proper" way: create a JavaScript entry file and "import" any CSS that it needs. 00:01:39.616 --> 00:01:42.976 align:middle But, we also recognize that this is a legitimate situation. 00:01:43.326 --> 00:01:45.666 align:middle So, Encore has a little extra magic. 00:01:45.666 --> 00:01:50.866 align:middle First, move both of the files up into our assets/css/ directory. 00:01:52.906 --> 00:01:57.336 align:middle And just because we can, make both of them scss files. 00:01:58.846 --> 00:02:05.546 align:middle Next, in webpack.config.js add a special thing called addStyleEntry(). 00:02:06.146 --> 00:02:10.226 align:middle We'll have one called account pointing to . 00:02:10.226 --> 00:02:18.916 align:middle /assets/css/account.scss and another one called login pointing to login.scss. 00:02:19.856 --> 00:02:20.566 align:middle Easy enough! 00:02:21.206 --> 00:02:29.376 align:middle Find your Encore build, press control + C, and restart it: yarn watch Awesome! 00:02:29.706 --> 00:02:34.976 align:middle We can see that the account and login entries both only dump CSS files. 00:02:34.976 --> 00:02:40.986 align:middle And this means that, back in index.html.twig, we can replace the link tag 00:02:40.986 --> 00:02:43.746 align:middle with {{ encore_entry_link_tags('account') }}. 00:02:45.136 --> 00:02:50.086 align:middle Copy that and do the same thing in login.html.twig for the login entry. 00:02:50.086 --> 00:02:55.896 align:middle And then in register.html.twig, one more time for login. 00:02:57.076 --> 00:03:00.296 align:middle Ok! Let's double-check that the site doesn't explode. 00:03:01.246 --> 00:03:03.276 align:middle Go to the /account profile page. 00:03:05.076 --> 00:03:06.436 align:middle Everything looks fine. 00:03:07.006 --> 00:03:10.506 align:middle So... yea, addStyleEntry() is available for this. 00:03:10.826 --> 00:03:14.686 align:middle But... to pull it off, Encore does some hacking internally. 00:03:15.396 --> 00:03:22.366 align:middle Really, addStyleEntry() is the same as addEntry(), which means that Webpack does try 00:03:22.366 --> 00:03:24.426 align:middle to output an empty JavaScript file. 00:03:25.186 --> 00:03:29.686 align:middle Encore basically just deletes that file so that we don't have to look at it. 00:03:30.576 --> 00:03:36.456 align:middle Next, oh, we get to talk about one of my favorite things about Webpack and Encore: 00:03:36.976 --> 00:03:41.236 align:middle how to automatically convert your CSS - and JavaScript - 00:03:41.446 --> 00:03:44.226 align:middle so that it's understood by older browsers. 00:03:44.726 --> 00:03:50.336 align:middle And how to control exactly which browsers your site needs to support.