style-loader
Advanced tools
Package description
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.
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 stylesLazy 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
});css-loader interprets @import and url() like import/require() and will resolve them. It is often used alongside style-loader in webpack configurations.
This webpack plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It is useful for caching and parallel loading but does not inject styles into the DOM like style-loader.
sass-loader compiles Sass/SCSS files to CSS. It is used in combination with css-loader and style-loader in webpack configurations to handle styles written in Sass/SCSS.
Changelog
Readme
Adds CSS to the DOM by injecting a <style> tag
npm install style-loader --save-dev
require("style-loader!raw-loader!./file.css");
// => add rules in file.css to document
It's recommended to combine it with the css-loader: require("style-loader!css-loader!./file.css").
It's also possible to add a URL instead of a CSS string:
require("style-loader/url!file-loader!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
(experimental)
When using local scope CSS the module exports the generated identifiers:
var style = require("style-loader!css-loader!./file.css");
style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"
var style = require("style-loader/useable!css-loader!./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.
insertAtBy default, the style-loader appends <style> elements to the end of the <head> tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'top', e.g. require('../style.css?insertAt=top').
singletonIf defined, the style-loader will re-use a single <style> element, instead of adding/removing individual elements for each required module. Note: this option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton query parameter (?singleton or ?-singleton).
convertToAbsoluteUrlsIf convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves an issue where relative resources fail to load when source maps are enabled. You can enable it with the convertToAbsoluteUrls query parameter (?convertToAbsoluteUrls).
attrsIf defined, style-loader will attach given attributes with their values on <style> / <link> element.
Usage:
require('style-loader?{attrs:{id: "style-tag-id"}}!style.scss');
// will create style tag <style id="style-tag-id">
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: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
},
{
test: /\.useable\.css$/,
use: [
{
loader: "style-loader/useable"
},
{ loader: "css-loader" },
],
},
],
},
}
Note about source maps support and assets referenced with url: when style loader is used with ?sourceMap option, the CSS modules will be generated as Blobs, so relative paths don't work (they would be relative to chrome:blob or chrome:devtools). In order for assets to maintain correct paths setting output.publicPath property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the convertToAbsoluteUrls option mentioned above.
Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test.
Tobias Koppers |
Kees Kluskens |
MIT
FAQs
style loader module for webpack
We found that style-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
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.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.