In the last section we install materialist's says as an NPR module into our project we're now going
to continue by hooking up the CSSA files inside of this NPM package to our project.
Now again the way in which we're doing this is not quite as straightforward as just using the link tag
right here and pasting this into our age HTML file but this is something you're seeing more commonly
with CSSA frameworks these days.
So we're going to take the slightly more complicated approach but understand what is actually going
on behind the scenes.
When we install it as an NPM module.
So let's get to it.
The first thing I want to tell you about is the Web pack module that we are making use of that came
as a part of the Create re-act app installation that we used.
So when we installed create re-act up in and used it to generate a new project we automatically got
some infrastructure inside our project that configures and make use makes use of Web pack web pack is
what's called a module loader.
We can feed in a big old web file a big web of files to it and what pack will automatically somehow
concatenate together and arrange all these different files in such a way that it spits out one or very
few output files.
So essentially well-packed allows us to take a big old pile of separate javascript files and condense
it down to one individual file.
It doesn't always have to be one per se.
Sometimes we want multiple files but that's it's own little discussion.
What pack is not only limited to processing javascript files like the ones we have right now though.
You can also load up what are called Lowder's into web pack that instruct web pack how to handle other
types of files as well in particular one other file type that will handle out of the box with our create
re-act up installation is CSSA files.
So if we import a CSSA file directly into a javascript file well-packed will look at the import statement
it will recognize that we are attempting to import in a CSSA file and it will include it into our project
output as VSS rather than trying to parse it as actual raw javascript.
Which is exactly what we need.
So that's the slightly more complicated way that I mentioned that where we are hooking this thing up
with NPM really you want to have some idea of what web pack is doing behind the scenes to really understand
how we can somehow import it with import statements when using CSSA files.
So let's see what this actually looks like in practice.
Inside my code editor I'm going to find my client directory.
So here it is right here.
And then inside there I'm going to find my node modules folder and as a reminder remember the node modules
directory is where all of our projects dependencies are placed.
If we scroll down very far inside this directory we will eventually come across the material design
or the materialized CSSA library.
So here it is right here.
So let's open this up inside of there you'll find a folder called dist.
And then inside of there you'll find a folder called CSX.
And so right here are two CSSA files.
One is called materialized Nazi SS and the other is materialized in the mini version right here is the
minute fied version of all the US.
So for us we're going to include in the minute five version because we know we're not really going to
be referencing the raw CSSA inside there like we don't really have to look at it or anything.
So we're completely fine using materialize in that CSSA file.
So in practice all we really have to do is write an import statement that will require in or import
in this file right here into our project structure as soon as we do whenever well-packed runs.
And remember it runs every time our application is changed.
It'll automatically include in the CSSA file.
So let's see what that looks like.
To import this file the CSSA file.
I'm going to import it into our index dot G-S file.
In truth it doesn't really matter where we put this import statement.
All that matters is that we place an import for at least one time inside of our application.
I like to put it inside the index file just because it's a Verbier root level requirement of our project.
I think it just kind of makes sense there but you can easily make the case to me to say that it should
be inside the Apogees file as well.
Really there's a couple of different ways you can handle this one.
And really they're all correct.
OK so let's get to this.
At the very top of the index G-S file I'm going to import in the CSSA file so import materialize see
SS from.
And then we're going to provide the path to this file.
Will say materialize.
Dash CSSA.
That's the name of the module slash dist because that's the name of the directory slash CSSA slash materialize
in VSS so materialise men don't see SS like so nothing.
One thing I want to mention to you is that when we are importing non javascript files we do have to
add on the file extension right here so we can't get away with leaving the file extension off like we
do with files that we import.
Like say the app import statement right here or the reducers import.
So these truly are not James Files but web pack assumes that we mean us.
If we leave that extension off when we are importing anything else yes we have to use the CSSA extension
to say yes.
Specifically this file right here.
I'll get the other thing to mention is that you'll notice that we did not use any type of relative path
name so I didn't do something like Dotts slash here or anything like that.
Whenever well-packed parses an import statement path like this.
If you do not provide a well relative path what pack automatically assumes that you are trying to specify
a NPM module or module that is installed inside of your node modules directory.
So no need to specify a relative path here we just say materialized DSS and I want specifically this
file inside of there.
OK now the last thing I want to say is that when we import a CSSA file like this it doesn't actually
assign anything to any variable inside the javascript world so this variable that we just declared right
here and presumably assign some value to we do not need it all so we can condense down the import statements
import statement to just be the actual import this file to do so.
All we have to do is remove the variable name and the From statement.
So overall this entire thing becomes just import this VSS file like that right there.
OK so now when we save this web pack is going to run again.
It's going to attempt to look at all the different files that we are importing into our application
structure.
One of them is now the CSSA file materialized not.
SS So materialize is going to recognize this is a CSSA file and treated differently than it does the
other javascript ones.
At the end of the day it will produce a final output that includes all these javascript files that we
have in addition to the serialise or seeming that materialized out CSSA file.
OK let's see what happens when we save it.
I'll save the file and condense down the node modules directory as well.
And then when we go back over to the browser now it's very hard to see.
Well let's refresh the page first.
Oops my mistake we never restart the server.
So that's very important as well.
Let's make sure we restart the server.
So I'm inside the server directory and we'll run NPM run dev.
Now rather than make you have to watch all my server start up let's take a quick break.
We'll come back in the next section and we will verify that the CSSA file was successful installed.
So I'll see you in just a second.