@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

Package Sidebar

Install

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

Weekly Downloads

2

Version

1.0.1

License

ISC

Unpacked Size

18.6 kB

Total Files

28

Last publish

Collaborators

  • toshiyuki-ogawa