Search code examples
htmlmoduleloaderpolymerecmascript-6

Can ES6's module loader also load assets (html/css/...)

ES6's modules are based on a flexible loader architecture (although the standard is not final, so ...).

Does this mean ES6's loader, based on system.js, can load all assets? I.e. CSS, HTML, Images, Text, .. files of any sort?

I ask because I'm starting to use WebComponents & Polymer which have their own HTML import, and implementing them with ES6, which has its own import/loader (system.js).

Solution

  • If you use SystemJS then you can load assets by using plugins:

    // Will generate a <link> element for my/file.css
System.import('my/file.css!')
    .then(() => console.log('CSS file loaded'));

    Alternatively, you can use an import statement. This will make sure that the CSS file is loaded before the your script executes:

    import 'my/file.css!';

    Finally, you can retrieve the contents of the file using the text plugin:

    import cssContent from 'my/file.css!text';
console.log('CSS file contents: ', cssContent);

    Another option is to add the css as a dependency in JSPM config files. Basically adding the dependency in the specific package .json file and then running 'jspm install' which will add the override to package.js & jspm.config.js