WEBVTT

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

00:00:01.166 --> 00:00:06.636 align:middle
What if I want to use Sass instead of
normal CSS, or maybe Less or Stylus?

00:00:07.106 --> 00:00:10.566 align:middle
Normally, that takes some setup:
you need to create a system

00:00:10.566 --> 00:00:13.376 align:middle
that can compile all of your
Sass files into CSS.

00:00:13.376 --> 00:00:16.446 align:middle
But with Encore, we get this for free!

00:00:17.606 --> 00:00:20.696 align:middle
Rename app.css to app.scss.

00:00:20.696 --> 00:00:27.686 align:middle
Of course, when we do that, the build fails
because we need to update the import in app.js.

00:00:28.946 --> 00:00:31.156 align:middle
But the build still fails.

00:00:31.926 --> 00:00:32.856 align:middle
Go check out the error.

00:00:34.126 --> 00:00:36.376 align:middle
Woh! That's awesome!

00:00:36.866 --> 00:00:38.406 align:middle
It basically says: Hey!

00:00:38.606 --> 00:00:39.206 align:middle
How are you?

00:00:39.536 --> 00:00:41.356 align:middle
Great weather lately, right?

00:00:41.826 --> 00:00:45.496 align:middle
Listen, it looks like you're
trying to load a Sass file.

00:00:45.846 --> 00:00:46.706 align:middle
That's super!

00:00:47.296 --> 00:00:52.226 align:middle
To do that, enable the feature in
Encore and install these libraries.

00:00:52.896 --> 00:00:58.976 align:middle
This is the philosophy of Encore: give
you a really solid, but small-ish core,

00:00:59.446 --> 00:01:02.506 align:middle
and then offer a ton of optional features.

00:01:03.676 --> 00:01:05.746 align:middle
Go back to webpack.config.js.

00:01:06.436 --> 00:01:09.156 align:middle
The enableSassLoader() line is already here.

00:01:09.816 --> 00:01:11.206 align:middle
Uncomment it.

00:01:11.376 --> 00:01:19.416 align:middle
Back at the terminal, copy the yarn add
command, go to the open tab, and run it!

00:01:20.346 --> 00:01:25.986 align:middle
This could take a minute or two:
node-sass is a C library and it may need

00:01:25.986 --> 00:01:28.906 align:middle
to compile itself depending on your system.

00:01:29.446 --> 00:01:34.246 align:middle
Ding! Thanks to the watch script,
we normally don't need to worry

00:01:34.246 --> 00:01:36.316 align:middle
about stopping or restarting Encore.

00:01:36.876 --> 00:01:43.036 align:middle
There is one notable exception: when
you make a change to webpack.config.js,

00:01:43.236 --> 00:01:45.826 align:middle
you must stop and restart Encore.

00:01:46.466 --> 00:01:48.696 align:middle
That's just a limitation of Webpack itself:

00:01:49.176 --> 00:01:52.636 align:middle
it can't re-read the fresh
configuration until you restart.

00:01:52.636 --> 00:01:56.526 align:middle
Hit control + C and then run yarn watch again.

00:01:59.826 --> 00:02:01.256 align:middle
And this time...

00:02:01.256 --> 00:02:05.566 align:middle
yes! We just added Sass support in like...

00:02:05.716 --> 00:02:07.926 align:middle
two minutes - how awesome is that?

00:02:08.756 --> 00:02:12.046 align:middle
This next part is optional,
but I want to get organized...

00:02:12.046 --> 00:02:14.096 align:middle
instead of having one big file.

00:02:15.266 --> 00:02:16.876 align:middle
Create a new directory called layout.

00:02:17.576 --> 00:02:22.076 align:middle
And for this top stuff, create
a file called _header.scss.

00:02:22.906 --> 00:02:26.816 align:middle
Little-by-little, we're going to move
all of this code into different files.

00:02:27.996 --> 00:02:30.446 align:middle
Grab the first section and put it into header.

00:02:31.326 --> 00:02:33.256 align:middle
We'll import the new files when we finish.

00:02:33.976 --> 00:02:36.286 align:middle
Next is the "advertisement" CSS.

00:02:37.206 --> 00:02:39.266 align:middle
Create another folder called components/.

00:02:40.836 --> 00:02:44.546 align:middle
And inside, a new _ad.scss file.

00:02:48.666 --> 00:02:49.716 align:middle
I'll delete the header...

00:02:50.336 --> 00:02:51.496 align:middle
then move the code there.

00:02:55.836 --> 00:02:56.786 align:middle
Let's keep going!

00:02:56.786 --> 00:03:02.926 align:middle
For the article stuff, create
_articles.scss, and move the code.

00:03:12.996 --> 00:03:19.896 align:middle
Then _profile.scss, copy that code...

00:03:20.136 --> 00:03:20.926 align:middle
and paste.

00:03:23.606 --> 00:03:26.566 align:middle
For the "Create Article"
and "Article Show" sections,

00:03:26.836 --> 00:03:30.946 align:middle
let's copy all of that and
put it into _article.scss.

00:03:30.946 --> 00:03:42.356 align:middle
And for the footer, inside layout/, create
one more file there called _footer.scss and...

00:03:42.706 --> 00:03:43.956 align:middle
move the footer code.

00:03:49.596 --> 00:03:51.826 align:middle
And finally, copy the sortable code,

00:03:55.756 --> 00:04:00.326 align:middle
create another components partial
called _sortable.scss and paste.

00:04:02.556 --> 00:04:07.066 align:middle
Now we can import all of this with @import '.

00:04:07.066 --> 00:04:10.466 align:middle
/layout/header' and @import '.

00:04:10.466 --> 00:04:11.726 align:middle
/layout/footer'.

00:04:12.766 --> 00:04:17.646 align:middle
Notice: you don't need the _ or the
.scss parts: that's a Sass thing.

00:04:18.466 --> 00:04:30.296 align:middle
Let's add a few more imports for the
components: ad, articles, profile and sortable.

00:04:30.296 --> 00:04:34.826 align:middle
Phew! That took some work,
but I like the result!

00:04:35.596 --> 00:04:43.216 align:middle
But, of course, Encore is here to ruin our
party with a build failure: Cannot resolve .

00:04:43.216 --> 00:04:47.136 align:middle
/images/space-nav.jpeg We know that error!

00:04:47.656 --> 00:04:49.466 align:middle
In _header.scss...

00:04:49.926 --> 00:04:51.196 align:middle
ah, there it is.

00:04:51.766 --> 00:04:54.686 align:middle
The path needs to go up one more level now.

00:04:56.226 --> 00:04:57.946 align:middle
And... it works.

00:04:58.606 --> 00:05:00.946 align:middle
Move over and make sure nothing looks weird.

00:05:01.936 --> 00:05:02.736 align:middle
Brilliant!

00:05:03.616 --> 00:05:09.216 align:middle
To celebrate that we're processing through
Sass, let's at least use one of its features.

00:05:10.366 --> 00:05:16.106 align:middle
Create a new directory called helper/
and a new file called _variables.scss.

00:05:16.106 --> 00:05:22.976 align:middle
At the top of _header.scss, we
have a gray background color.

00:05:24.006 --> 00:05:26.886 align:middle
Just to prove we can do it, in _variables,

00:05:27.016 --> 00:05:33.276 align:middle
create a new variable called
$lightgray set to #efefee.

00:05:34.686 --> 00:05:38.866 align:middle
And back in headers, reference that: $lightgray.

00:05:39.626 --> 00:05:42.296 align:middle
We even get auto-completion on that!

00:05:42.296 --> 00:05:45.616 align:middle
As soon as we save, the build fails!

00:05:46.906 --> 00:05:50.276 align:middle
Undefined variable lightgray Perfect!

00:05:50.276 --> 00:05:50.796 align:middle
Because...

00:05:51.076 --> 00:05:58.696 align:middle
inside of app.scss, all the way on top, we
still need to @import the helper/variables file.

00:06:00.156 --> 00:06:01.486 align:middle
About a second later...

00:06:01.916 --> 00:06:04.326 align:middle
ding! It builds and...

00:06:04.686 --> 00:06:06.176 align:middle
the background is still there.

00:06:06.836 --> 00:06:08.356 align:middle
But wait, there's more!

00:06:09.056 --> 00:06:14.456 align:middle
When we import bootstrap, Encore has some logic
to find the right CSS file in that package.

00:06:14.826 --> 00:06:17.586 align:middle
But now that we're inside a Sass file,

00:06:18.036 --> 00:06:23.696 align:middle
it's smart enough to instead
import the bootstrap.scss file!

00:06:24.016 --> 00:06:25.766 align:middle
Woh! Check it out.

00:06:26.246 --> 00:06:30.456 align:middle
Hold Command or Ctrl and click
~bootstrap to jump to that directory.

00:06:31.066 --> 00:06:33.116 align:middle
Then open up package.json.

00:06:33.996 --> 00:06:38.846 align:middle
This has a style key, but
it also has a sass key!

00:06:39.766 --> 00:06:44.376 align:middle
Because we're importing from inside
a Sass file, Encore first looks

00:06:44.376 --> 00:06:46.466 align:middle
for the sass key and loads that file.

00:06:46.596 --> 00:06:51.066 align:middle
If there isn't a sass key,
it falls back to using style.

00:06:52.406 --> 00:06:56.306 align:middle
Now look at the font-awesome/ directory
and find its package.json file.

00:06:57.076 --> 00:06:59.296 align:middle
It actually does not have a sass key!

00:06:59.726 --> 00:07:04.666 align:middle
And so, it's still loading the
font-awesome.css file, which is fine.

00:07:05.596 --> 00:07:10.746 align:middle
If you did want to load the Sass file, you would
just need to point at the file path directly.

00:07:11.746 --> 00:07:15.756 align:middle
Anyways, to prove that the
Bootstrap Sass file is being loaded,

00:07:16.026 --> 00:07:18.746 align:middle
we can override some of its variables.

00:07:19.626 --> 00:07:20.866 align:middle
See this search button?

00:07:21.326 --> 00:07:24.906 align:middle
It's blue because it has the btn-info class.

00:07:25.526 --> 00:07:27.646 align:middle
It's color hash is...

00:07:27.866 --> 00:07:31.116 align:middle
here: #1782b8.

00:07:32.036 --> 00:07:36.076 align:middle
Suppose you want to change the info
color globally to be a bit darker.

00:07:36.626 --> 00:07:41.126 align:middle
Bootstrap lets you do that in Sass by
overriding a variable called $info.

00:07:41.986 --> 00:07:50.506 align:middle
Try it: inside the variables file, set
$info: to darken(), the hash, and 10%.

00:07:51.336 --> 00:07:52.656 align:middle
Once the build finishes...

00:07:52.826 --> 00:07:54.086 align:middle
watch closely.

00:07:58.206 --> 00:07:59.446 align:middle
It got darker!

00:07:59.676 --> 00:08:00.926 align:middle
How cool is that?

00:08:02.016 --> 00:08:05.056 align:middle
Next, let's fix our broken
img tags thanks to one

00:08:05.056 --> 00:08:08.906 align:middle
of my favorite new Encore
features called copyFiles().