@oc-soft/rt-link-loader
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Runtime style loader for webapck

    Runtim style loader is a webpack loader. You get stylesheet object at runtime. At compile time, you do not neeed to prepare complete css source file, but file name has to be identified with html link tag href. This loader injects a procedure to find stylesheet from document object.

    main.js

    const styleSheet = require('main.css')
     
    // use style sheet
    // you see style sheet api at
    // https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
     
    const pTags = document.getElementsByTagName('p')
     
    pTags[0].innerText = style.rules[0].cssText

    main.css at compile time

    /* empty css at compile time */

    https://example.com/rt-style-loader/index.html

    <!DOCTYPE html>
    <html>
    <head>
      <link href="main.css" rel="sylesheet">
    </head>
    <body>
      <h1>main.css first content</h>
      <p><p>
    </body>
    </html>

    https://example.com/rt-style-loader/main.css

    p {
    background-color: #ABB2B9;
    }

    You can see the result by jsfiddle

    Example source

    Install

    npm i @oc-soft/rt-link-loader

    DownloadsWeekly Downloads

    5

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    18.6 kB

    Total Files

    28

    Last publish

    Collaborators

    • toshiyuki-ogawa