Nimble Pirate Monitor

    aurelia-useable-style-loader
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    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">

    Install

    npm i aurelia-useable-style-loader

    DownloadsWeekly Downloads

    37

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    68

    Last publish

    Collaborators

    • jbockle