This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

JSPM - Loading CSS with JSPM Plugins

2:22 JavaScript lesson by

JSPM is a JavaScript Package Manager, but it can also install and load other file types such as CSS using plugins. This lesson demonstrates how to install twitter's bootstrap library and then load it into your project.


egghead.io comment guidelines

Avatar
egghead.io

JSPM is a JavaScript Package Manager, but it can also install and load other file types such as CSS using plugins. This video demonstrates how to install twitter's bootstrap library and then load it into your project.

Avatar
Martin

Looking forward to see more lessons about SystemJs/JSPM. Off topic question. what theme are you using in Webstorm. thanks!

In reply to egghead.io
Avatar
EBIA

Looking forward to see more lessons about SystemJs/JSPM too,..

Jspm can also use plugins to load files other than JavaScript, like CSS or JSON. To do that you would say jspm install css, and this will install the CSS plugin. Then just as in every jspm project, include system.js and include the config file it creates. Then we can go ahead and system.import any CSS file. Now I'm just going to paste in the bootsrap.css file from the bootstrap.cdn, and every plugin requires that you append a exclamation point at the end to tell it that it's a plugin and not a JavaScript file.

So once I hit save, you can see it applied all the bootstrap styles to the content I had in my HTML. Now if you didn't want to load bootstrap from a .cdn and you just want to install it locally, you can say jspm install bootstrap, hit enter, and this will go ahead and install bootstrap for us, but the one thing to point out here is that if you try and just reference bootstrap by saying bootstrap, you'll see that the styles did not apply here, and that's because it's loading the bootstrap JavaScript file and not the bootstrap CSS files.

So if you look at your config and you see what bootstrap is actually referencing, so github twitter-bootstrap, bootstrap, and then the version number, we can compare that to where the actual CSS file we want lives, which is github, which matches github. Twitter-bootstrap, the version number, CSS, and bootstrap CSS. So we know that bootstrap refers all the way up into this, which matches here, so we just have to append CSS and bootstrap.css.

So we'll say /CSS/bootstrap.css!, hit save, and now we're loading it locally. You can also do this from, instead of just doing a system import here, if I just want to load my main app.js and then in my app.js I want to import that file and make sure to include the bang there, you can see that that will load it as well. So if I delete this line, hit save, you can see the styles will go away, undo, hit save, and you can see that the styles are back.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?