WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.886 --> 00:00:04.736 align:middle Our layout.js file requires main.css. 00:00:05.446 --> 00:00:06.246 align:middle That's cool... 00:00:06.476 --> 00:00:07.476 align:middle I guess... 00:00:07.756 --> 00:00:10.306 align:middle if you like using boring old CSS. 00:00:10.826 --> 00:00:15.256 align:middle But I want to be more Hipster, so let's use Sass instead. 00:00:16.036 --> 00:00:19.386 align:middle Well, I could use Stylus to be super hipster... 00:00:19.826 --> 00:00:24.326 align:middle and Encore does support that, but let's use something a bit more familiar. 00:00:25.106 --> 00:00:28.836 align:middle To start, rename the file to main.scss. 00:00:30.556 --> 00:00:35.346 align:middle Now, we can use a fancier syntax for these psuedo-selectors. 00:00:40.676 --> 00:00:42.566 align:middle OooooOoOooOooo. 00:00:44.176 --> 00:00:50.526 align:middle Obviously, the build is failing because, in layout.js, that file path is wrong! 00:00:51.376 --> 00:00:53.946 align:middle Change it to main.scss. 00:00:55.286 --> 00:00:58.026 align:middle So... does it already work? 00:00:59.186 --> 00:01:05.226 align:middle No! On the watch tab of our terminal, it failed when loading main.scss. 00:01:05.226 --> 00:01:11.336 align:middle Out-of-the-box, Encore cannot process Sass files. 00:01:11.956 --> 00:01:14.776 align:middle But, it tells you how to fix this! 00:01:15.366 --> 00:01:20.106 align:middle We just need to enable it inside our config & install some extra packages. 00:01:21.086 --> 00:01:24.676 align:middle Remember: Encore is full of features. 00:01:25.116 --> 00:01:29.516 align:middle But to stay light, it doesn't enable everything automatically. 00:01:30.206 --> 00:01:36.816 align:middle Instead, you are in control: enable what you need, and Encore will tell you what to do. 00:01:37.676 --> 00:01:38.286 align:middle It's kinda cool! 00:01:39.736 --> 00:01:44.416 align:middle Go back to webpack.config.js and add .enableSassLoader(). 00:01:45.826 --> 00:01:53.716 align:middle Then, back on your terminal, copy the yarn add line, stop Encore with Ctrl+C, and paste! 00:01:54.316 --> 00:02:04.476 align:middle yarn add sass-loader node-sass -- dev Let it do its thing, then... 00:02:04.716 --> 00:02:06.116 align:middle restart Encore! 00:02:06.966 --> 00:02:12.326 align:middle yarn run encore dev -- watch No errors! 00:02:13.046 --> 00:02:16.186 align:middle To prove it works, move over to your browser and... 00:02:16.616 --> 00:02:20.396 align:middle refresh! It still looks great! 00:02:20.966 --> 00:02:24.136 align:middle Well, most importantly, on the login page, 00:02:24.456 --> 00:02:28.186 align:middle when we hover of the button, it does have that styling. 00:02:29.636 --> 00:02:37.016 align:middle There's one thing I want you to notice: the name of this method: enableSassLoader(). 00:02:37.616 --> 00:02:40.116 align:middle "Loader" is a Webpack concept. 00:02:40.666 --> 00:02:44.066 align:middle Encore tries to make Webpack as easy as possible, 00:02:44.676 --> 00:02:49.966 align:middle but it reuses Webpack's language and terms whenever possible. 00:02:49.966 --> 00:02:51.786 align:middle And that's important! 00:02:52.246 --> 00:02:56.566 align:middle If you ever need to do something custom with Webpack, it's usually pretty easy 00:02:56.566 --> 00:02:59.226 align:middle to figure out how that fits into Encore. 00:03:01.076 --> 00:03:05.436 align:middle Also, we're requiring bootstrap.css right now. 00:03:05.886 --> 00:03:13.176 align:middle But, with Sass support, you could instead import Bootstrap's Sass files directly. 00:03:13.916 --> 00:03:19.856 align:middle The advantage is that you can override Bootstrap's Sass variables and take control 00:03:19.856 --> 00:03:22.306 align:middle of colors, sizes and other stuff. 00:03:23.136 --> 00:03:28.296 align:middle To do that with Bootstrap 3, you'll need the bootstrap-sass package. 00:03:29.086 --> 00:03:32.916 align:middle For Bootstrap 4, the Sass files are included in the main package. 00:03:33.846 --> 00:03:37.736 align:middle Let's fix one more problem quickly: sourcemaps! 00:03:38.526 --> 00:03:42.716 align:middle If you click on a row, we have some console.log() debugging code. 00:03:43.346 --> 00:03:45.556 align:middle But, where does that code come from? 00:03:46.386 --> 00:03:53.726 align:middle Well, if you click on the rep_log.js link, apparently it's coming from line 197. 00:03:55.056 --> 00:03:56.356 align:middle But, that's a lie! 00:03:56.886 --> 00:03:57.676 align:middle Well, sort of. 00:03:58.376 --> 00:04:03.356 align:middle This is the built rep_log.js file, not the source file. 00:04:04.186 --> 00:04:10.176 align:middle And this highlights a classic problem: when you build many files into one file, 00:04:10.586 --> 00:04:15.886 align:middle debugging gets harder because error messages and other info don't point 00:04:15.886 --> 00:04:19.646 align:middle to the real line number or the original filename. 00:04:20.496 --> 00:04:21.226 align:middle Let's fix that! 00:04:21.916 --> 00:04:26.276 align:middle Back in webpack.config.js, add .enableSourceMaps() 00:04:26.436 --> 00:04:30.426 align:middle with an argument: !Encore.isProduction(). 00:04:31.706 --> 00:04:35.596 align:middle This enables extra debugging info - called sourcemaps - 00:04:36.186 --> 00:04:39.106 align:middle whenever we are creating a development build. 00:04:40.106 --> 00:04:45.876 align:middle Because we just updated the Webpack config, restart Encore: yarn run encore dev -- 00:04:45.876 --> 00:04:55.596 align:middle watch Thanks to this, all of our JavaScript and CSS files now have some extra content 00:04:55.596 --> 00:05:01.616 align:middle at the bottom that hints to our browser where the source content came from. 00:05:02.636 --> 00:05:06.526 align:middle This time, when I click a row, in the console, awesome! 00:05:07.176 --> 00:05:11.446 align:middle It's coming from RepLogApp.js line 104. 00:05:12.046 --> 00:05:13.926 align:middle That is the real spot. 00:05:14.856 --> 00:05:21.596 align:middle Oh, by the way: if you don't enable sourcemaps, you may still see some sourcemap info 00:05:21.596 --> 00:05:24.376 align:middle at the bottom of your CSS files during development. 00:05:25.146 --> 00:05:28.666 align:middle That's just an internal quirk - it won't be there on production.