JSPM - Loading CSS with JSPM Plugins

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

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.

[00:00] 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.

[00:40] 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.

[01:17] 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.

[01:47] 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.

Erkan Buelbuel
Erkan Buelbuel
~ 8 years ago

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

Markdown supported.
Become a member to join the discussionEnroll Today