Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

    JSPM - Loading CSS with JSPM Plugins

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.