WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:02.006 --> 00:00:07.796 align:middle
We're on a mission to refactor all the old
<script> and <link> tags out of our templates.

00:00:07.796 --> 00:00:10.366 align:middle
For the base layout, we're half way done!

00:00:10.846 --> 00:00:14.676 align:middle
There is only one script tag,
which points to the app entry.

00:00:14.986 --> 00:00:16.336 align:middle
That's perfect.

00:00:17.316 --> 00:00:22.956 align:middle
Back on top, we do still have multiple
link tags, including Bootstrap from a CDN,

00:00:23.216 --> 00:00:28.666 align:middle
FontAwesome, which I apparently just
committed into my public/css directory,

00:00:29.146 --> 00:00:32.646 align:middle
and some custom CSS in styles.css.

00:00:32.646 --> 00:00:35.556 align:middle
First, eliminate Bootstrap!

00:00:36.256 --> 00:00:40.716 align:middle
In the same way that we can properly
install JavaScript libraries with yarn,

00:00:40.956 --> 00:00:43.686 align:middle
we can also install CSS libraries!

00:00:44.046 --> 00:00:49.496 align:middle
Woo! In app.js, we're already
importing a single app.css file.

00:00:50.176 --> 00:00:54.796 align:middle
We could add another import
right here for the Bootstrap CSS.

00:00:55.356 --> 00:01:00.136 align:middle
Instead, I prefer to import
just one CSS file per entry.

00:01:01.016 --> 00:01:07.526 align:middle
Then, from within that CSS file, we
can use the standard @import CSS syntax

00:01:07.676 --> 00:01:09.916 align:middle
to import other CSS files.

00:01:10.686 --> 00:01:13.416 align:middle
To Webpack, these two approaches are identical.

00:01:14.976 --> 00:01:19.846 align:middle
Now, you might be thinking: Don't we need
to install the bootstrap CSS library?

00:01:20.486 --> 00:01:21.636 align:middle
And... yes!

00:01:21.886 --> 00:01:23.336 align:middle
Well, I mean, no!

00:01:23.336 --> 00:01:25.996 align:middle
I mean, we already did it!

00:01:26.856 --> 00:01:29.016 align:middle
In node_modules/, look for bootstrap/.

00:01:29.776 --> 00:01:35.596 align:middle
This directory contains JavaScript but
it also contains the Bootstrap CSS.

00:01:35.596 --> 00:01:36.626 align:middle
But... hmm...

00:01:37.196 --> 00:01:43.006 align:middle
In JavaScript, we can say import then
simply the name of the package and...

00:01:43.006 --> 00:01:44.206 align:middle
it just works!

00:01:44.716 --> 00:01:47.796 align:middle
But we can't repeat that same trick for CSS.

00:01:48.386 --> 00:01:52.386 align:middle
Instead, we'll point directly
to the path we want, which,

00:01:52.506 --> 00:01:57.496 align:middle
in this case is probably dist/css/bootstrap.css.

00:01:58.376 --> 00:02:08.636 align:middle
Here's how: @import, ~bootstrap and
the path: /dist/css/bootstrap.css.

00:02:09.916 --> 00:02:12.836 align:middle
The ~ part is special to CSS and Webpack.

00:02:13.746 --> 00:02:17.416 align:middle
When you want to reference the node_modules/
directory from within a CSS file,

00:02:17.726 --> 00:02:22.226 align:middle
you need to start with ~.
That's different than JavaScript

00:02:22.486 --> 00:02:24.846 align:middle
where any path that doesn't start with .

00:02:25.216 --> 00:02:27.366 align:middle
is assumed to live in node_modules/.

00:02:27.366 --> 00:02:32.286 align:middle
After the ~, it's just a normal, boring path.

00:02:32.286 --> 00:02:32.506 align:middle
But yea...

00:02:32.896 --> 00:02:34.316 align:middle
that's all we need!

00:02:34.746 --> 00:02:36.236 align:middle
Move over and refresh.

00:02:37.446 --> 00:02:40.836 align:middle
This looks exactly the same!

00:02:40.836 --> 00:02:47.776 align:middle
And... remember how I said that we can't simply
import CSS by referencing only the package name?

00:02:48.146 --> 00:02:48.786 align:middle
That was...

00:02:48.926 --> 00:02:50.196 align:middle
kind of a lie.

00:02:50.846 --> 00:02:53.306 align:middle
Shorten this to just ~bootstrap.

00:02:54.246 --> 00:02:54.696 align:middle
Go try it!

00:02:54.696 --> 00:02:56.876 align:middle
Refresh and...

00:02:57.066 --> 00:03:03.416 align:middle
the same! This works thanks to a little
extra feature we added to Encore...

00:03:03.586 --> 00:03:06.256 align:middle
which may become a more standard
feature in the future.

00:03:07.016 --> 00:03:11.476 align:middle
We already know that when we import
a package by its name in JavaScript,

00:03:11.846 --> 00:03:15.666 align:middle
Webpack looks in package.json,
finds the main key....

00:03:17.346 --> 00:03:25.606 align:middle
there it is and uses this to know that it should
finally import the dist/js/bootstrap.js file.

00:03:26.496 --> 00:03:31.876 align:middle
Some libraries also include
these style or sass keys.

00:03:32.476 --> 00:03:38.056 align:middle
And when they do, you only need
to @import ~ and the package name.

00:03:38.916 --> 00:03:41.326 align:middle
Because we're doing this from inside a CSS file,

00:03:41.586 --> 00:03:45.896 align:middle
it knows to look inside package.json
for a style key.

00:03:46.526 --> 00:03:50.906 align:middle
This is just a shortcut to do the
exact same thing we had before.

00:03:51.986 --> 00:03:53.096 align:middle
Bootstrap, check!

00:03:53.616 --> 00:03:56.876 align:middle
Let's keep going: the next
link tag is for FontAwesome.

00:03:57.546 --> 00:04:04.516 align:middle
Get rid of that and celebrate by deleting
the public/css/font-awesome.css file

00:04:05.496 --> 00:04:08.216 align:middle
and this entire fonts/ directory.

00:04:09.046 --> 00:04:11.056 align:middle
This feels great!

00:04:11.446 --> 00:04:15.056 align:middle
We're deleting things that I never
should have committed in the first place.

00:04:16.376 --> 00:04:20.676 align:middle
Next, download FontAwesome
with: yarn add font-awesome --

00:04:20.816 --> 00:04:28.596 align:middle
dev When it finishes, go back to
node_modules/ and search for font-awesome/.

00:04:30.076 --> 00:04:32.076 align:middle
Got it! Nice!

00:04:32.346 --> 00:04:37.946 align:middle
It has directories for css/, less/,
scss/ whatever format we want.

00:04:38.656 --> 00:04:44.216 align:middle
And fortunately, if you look inside
package.json, it also has a style key.

00:04:44.816 --> 00:04:45.666 align:middle
Easy peasy!

00:04:48.076 --> 00:04:52.986 align:middle
In app.css, add @import '~font-awesome'.

00:04:53.746 --> 00:04:56.606 align:middle
Done. Find your browser and refresh.

00:04:57.916 --> 00:04:58.886 align:middle
Let's see...

00:04:58.886 --> 00:05:00.896 align:middle
down here, yes!

00:05:01.166 --> 00:05:03.256 align:middle
This is a FontAwesome icon.

00:05:03.626 --> 00:05:04.906 align:middle
It still works!

00:05:05.316 --> 00:05:07.496 align:middle
But this is way cooler than it seems!

00:05:07.896 --> 00:05:12.866 align:middle
Internally, the FontAwesome CSS
file references some font files

00:05:12.866 --> 00:05:16.966 align:middle
that the user's browser needs
to download: these files here.

00:05:17.526 --> 00:05:20.996 align:middle
But... these files aren't
in our public directory...

00:05:21.556 --> 00:05:24.256 align:middle
so shouldn't the paths to these be broken?

00:05:25.176 --> 00:05:28.766 align:middle
Close up node_modules and check
out the public/build/ directory.

00:05:29.296 --> 00:05:32.776 align:middle
Whoa! Where did this fonts/ directory come from?

00:05:33.816 --> 00:05:40.196 align:middle
When Webpack sees that a CSS file refers
to a font file, it copies those fonts

00:05:40.196 --> 00:05:46.406 align:middle
into this fonts/ directory and rewrites
the code in the final app.css file

00:05:46.646 --> 00:05:49.426 align:middle
so that the font paths point here.

00:05:50.146 --> 00:05:52.476 align:middle
Yes, it just handles it.

00:05:53.196 --> 00:05:58.936 align:middle
It also automatically adds a hash to the
filename that's based on the file's contents.

00:05:59.496 --> 00:06:03.986 align:middle
So if we ever update the font file,
that hash would automatically change

00:06:04.186 --> 00:06:06.756 align:middle
and the CSS would automatically point to it.

00:06:07.176 --> 00:06:09.746 align:middle
That's free browser cache busting.

00:06:10.626 --> 00:06:12.536 align:middle
Ok one more link tag to go.

00:06:13.206 --> 00:06:13.736 align:middle
Remove it!

00:06:14.526 --> 00:06:23.546 align:middle
Then, open css/styles.css, copy all of
this, delete that file, and, in app.css,

00:06:23.826 --> 00:06:27.516 align:middle
highlight the blue background and paste!

00:06:28.426 --> 00:06:30.116 align:middle
That's a simple step so...

00:06:30.226 --> 00:06:31.876 align:middle
it should work, right?

00:06:32.526 --> 00:06:41.756 align:middle
Nope! Check out the build failure:
Module not found: Can't resolve ..

00:06:41.876 --> 00:06:48.286 align:middle
/images/space-nav.jpg in
our assets/css directory.

00:06:48.716 --> 00:06:51.696 align:middle
It doesn't show the exact
file, but we only have one.

00:06:52.796 --> 00:06:57.416 align:middle
Ah, here's the problem: PhpStorm
is super angry about it too!

00:06:58.446 --> 00:07:01.256 align:middle
This background image references ..

00:07:01.306 --> 00:07:07.146 align:middle
/images, which was perfect when the
code lived in the public/css directory.

00:07:07.146 --> 00:07:11.716 align:middle
But when we moved it, we broke that path!

00:07:11.716 --> 00:07:13.016 align:middle
This is awesome!

00:07:13.336 --> 00:07:18.776 align:middle
Instead of us silently not realizing
we did this, we get a build error.

00:07:19.266 --> 00:07:24.516 align:middle
Amazing! We can't break paths
without Webpack screaming.

00:07:24.516 --> 00:07:30.866 align:middle
To fix this, let's "cut" the entire images/
directory and move it into the assets/ folder.

00:07:32.376 --> 00:07:33.486 align:middle
Yep, it's gone.

00:07:34.056 --> 00:07:36.506 align:middle
But Encore doesn't know to re-compile...

00:07:36.506 --> 00:07:38.836 align:middle
so make a small change and save.

00:07:42.876 --> 00:07:44.596 align:middle
Build successful!

00:07:46.876 --> 00:07:48.916 align:middle
Go check it out.

00:07:49.046 --> 00:07:52.666 align:middle
Refresh! It works!

00:07:53.166 --> 00:07:55.856 align:middle
And even better, look at the build/ folder.

00:07:56.716 --> 00:08:01.816 align:middle
We have an images/ directory
with space-nav.jpg inside.

00:08:02.836 --> 00:08:10.796 align:middle
Just like with fonts, Webpack sees our path,
realizes that space-nav.jpg needs to be public,

00:08:11.046 --> 00:08:14.816 align:middle
and so moves it into the build/images/ directory

00:08:15.206 --> 00:08:20.296 align:middle
and rewrites the background-image
code in the final CSS to point here.

00:08:21.346 --> 00:08:27.186 align:middle
The moral is this: all we need to do is
worry about writing our code correctly:

00:08:27.646 --> 00:08:33.306 align:middle
using the proper relative paths from
source CSS file to source image file.

00:08:33.916 --> 00:08:36.076 align:middle
Webpack handles the ugly details.

00:08:36.906 --> 00:08:42.236 align:middle
Now, this did break a few <img> tags on our
site that are referencing some of these files.

00:08:42.916 --> 00:08:45.116 align:middle
Now that they're not in the public/ directory...

00:08:45.116 --> 00:08:45.926 align:middle
they don't work.

00:08:46.446 --> 00:08:47.746 align:middle
We'll handle that soon.

00:08:48.126 --> 00:08:52.356 align:middle
But next, let's get more
from our CSS by using Sass.