The style-loader npm package is used to inject CSS into the DOM using multiple strategies. It is often used in combination with css-loader in webpack configurations to handle styles within JavaScript modules.

What are style-loader's main functionalities?

Inject styles into the DOM

This code sample demonstrates how to use style-loader in combination with css-loader to import a CSS file and inject the styles into the DOM.

import style from 'style-loader!css-loader!./style.css';

Useable styles

This code sample shows how to use the useable feature of style-loader to manually control when styles are injected into and removed from the DOM.

import style from 'style-loader/useable!css-loader!./style.css';
style.use(); // Injects styles
tyle.unuse(); // Removes styles

Lazy loading styles

This code sample illustrates how to lazy load styles with style-loader, which can be useful for code splitting scenarios.

import loadStyle from 'style-loader!css-loader!./style.css';
loadStyle().then(style => {
  // Use style here
});

Other packages similar to style-loader

Readme

Source

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.

Recommended configuration

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)

FAQs

What is style-loader?

Is style-loader popular?

Is style-loader well maintained?

Last updated on 14 Aug 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install