Load/unload styles in my Aurelia app

Help Requests
1

I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my ‘public’ root app and another admin.css for my ‘private’ (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.

I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don’t know what.

One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?

Steps I did:

  • npm install aurelia-useable-style-loader
  • then use the plugin in main.ts:
    > aurelia.use.plugin(‘aurelia-useable-style-loader’);
  • then added one reference in my aurelia.json:
    > “aurelia-useable-style-loader”,

Tha’s all. At runtime, no particular errors, but css are not loaded/unloaded.

Any help is greatly appreciated.

PS: as a workaround, I proceed differently (see below) but I’m curious to do it with the plugin aurelia-useable-style-loader

this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
   .then((data) => data.text())
   .then((styles) => {
        DOM.injectStyles(styles, null, null, 'masterStylesheet');
        this.masterStyleSheetLoaded = true;
   });
2 Likes
2

The plugin uses webpack style-loader/useable in order to work, but you are using System as a bundler. I think this is the problem (as you suggested yourself in the question)

1 Like
3

Thanks for your feedback. It is too bad this plugin (Webpack) is not compatible with SystemJs. Now I understand better.

1 Like