aurelia-useable-style-loader

Automatically loads/unloads styles using webpack's style-loader/useable

Usage no npm install needed!

<script type="module">
  import aureliaUseableStyleLoader from 'https://cdn.skypack.dev/aurelia-useable-style-loader';
</script>

README

aurelia-useable-style-loader

Automatically load/unload styles using webpack style-loader/useable. The imported style's use/unused are called automatically from aurelia's view engine hook lifecycle methods for beforeBind/beforeUnbind. This ensures that the style is only loaded into view if an component/element is currently requiring it.

webpack style-loader injectType 'lazyStyleTag' https://github.com/webpack-contrib/style-loader#lazystyletag

alt text

installation

  1. npm install aurelia-useable-style-loader

  2. then use the plugin in your main.ts

    export function configure(aurelia) {
  // add below line!
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-useable-style-loader'));
}

  3. configure/replace webpack loader rules to use style-loader with injectType lazyStyleTag
    webpack.config.js

    {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } }, 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } }, 'css-loader', 'sass-loader']
      }
    ]
  }
}

  4. require your style from html like you normally would

    <require from="./style.css">