CODEWITHSUNDEEP
javascriptjspm
r.sendecky
r.sendecky

Reputation: 10363

Load font-awesome with jspm

I started investigating jspm and stumbled across this issue. I seriously search all over Google but could not find a simple answer or example.

How do you load CSS and fonts that come with it?

I tried to do <script>System.import('font-awesome/css/font-awesome.css')</script> but it does not work. It adds .js extension to the url and I get a 404. like this: font-awesome.css.js I tried import 'font-awesome/css/font-awesome.css'; which does not work either.

So, for a jspm packages that contain css and fonts, how do you make them available to my application?

And what about the font files? Do I have to move them manually or get gulp to do it? How do you handle this in your jspm workflow?

Thanks

EDIT

Based on the given answer by Joy, I just want to clarify what I want. Investigating jspm I read about its ability to dynamically load modules (aka es6 module loading). This, I believe, is the crux of jspm. I don't want to bundler every time I change a file! I want to bundle once at the end of the development just before I upload the app to the server. During the development cycle I want jspm to dynamically load my js modules and assets. Otherwise, if bundling is required, I can just use already available (and much faster bundling solutions) like Browseryfy, Webpack. So bundling at every file change is not a solution. With Systemjs and HTTP/2 we should not need to bundle at all ever. And this, I thought, what the jspm was all about.

So can someone tell me if it is possibly to load assets (css, fonts, images) dynamically with jspm the same way it loads js modules? The key word here is dynamically without bundling first. If yes - how?

Upvotes: 2

Views: 2988

Answers (2)

Eduard Jacko
Eduard Jacko

Reputation: 2151

load it with css plugin.

jspm install css
jspm install fontawsome=github:FortAwesome/Font-Awesome

in the js file

import fontawsome from 'fontawsome/css/font-awesome.css!';

Upvotes: 0

Joey
Joey

Reputation: 456

Before you using font-awesome package, you need the CSS loading plugin and CSS build support.

$ jspm install css
$ jspm install npm:clean-css --dev
$ jspm install font-awesome

And create the main.js file which contains:

import 'font-awesome/css/font-awesome.min.css!';

Until now, you have two options that make them available.

(1) The first solution in index.html file is 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('main');
    </script>

    <i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>

You don't need to bundle all js file here. Import the main.js file only.

(2) Second solution is use jspm bundle-sfx

You can build a build.js by

$ jspm bundle-sfx main.js ./build.js

or gulp to automatically build the bundle file.

Here is a simple gulpfile.js example:

const gulp = require('gulp');
const gulp_jspm = require('gulp-jspm');

const paths = {
    main: './main.js',
    dest: './dest/'
};

gulp.task('scripts', function () {
    gulp.src(paths.main)
      .pipe(gulp_jspm({
          selfExecutingBundle: true
      }))
      .pipe(gulp.dest(paths.dest));
});

function reportChange(event){  
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}

gulp.task('watch', function () {
    gulp.watch([paths.main], ['scripts']).on('change', reportChange);
});

gulp.task('default', ['watch', 'scripts']);

Now, create a index.html file and can test it by httpster

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./dest/main.bundle.js"></script>

    <i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>

Check the jspm-cli/docs/plugins.md to get more informations.

Upvotes: 2

Related Questions