JSPM

  • Created
  • Published
  • Downloads 8013013
  • Score
    100M100P100Q248625F

style loader module for webpack

Package Exports

  • style-loader
  • style-loader/addStyles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (style-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

style loader for webpack

Usage

Documentation: Using loaders

Simple API

require("style!raw!./file.css");
// => add rules in file.css to document

It's recommended to combine it with the css-loader: require("style!css!./file.css").

It also possible to add a URL instead of a css string:

require("style/url!file!./file.css");
// => add a <link rel="stlyesheet"> to file.css to document

Reference-counted API

var style = require("style/useable!css!./file.css");
style.use(); // = style.ref();
style.unuse(); // = style.unref();

Styles are not added on require, but instead on call to use/ref. Styles are removed from page if unuse/unref is called exactly as often as use/ref.

Note: Behavior is undefined when unuse/unref is called more often than use/ref. Don't do that.

By convention the reference-counted API should be bound to .useable.css and the simple API to .css (similar to other file types, i. e. .useable.less and .less).

So the recommended configuration for webpack is:

{
  module: {
    loaders: [
      { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
      { test: /\.useable\.css$/, loader: "style/useable!css" }
    ]
  }
}

License

MIT (http://www.opensource.org/licenses/mit-license.php)