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.
Readme
Inject CSS into the DOM.
To begin, you'll need to install style-loader:
npm install --save-dev style-loader
It's recommended to combine style-loader with the css-loader
Then add the loader to your webpack config. For example:
style.css
body {
background: green;
}
component.js
import './style.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
| Name | Type | Default | Description |
|---|---|---|---|
injectType | {String} | styleTag | Allows to setup how styles will be injected into the DOM |
attributes | {Object} | {} | Adds custom attributes to tag |
insert | {String|Function} | head | Inserts tag at the given position into the DOM |
base | {Number} | true | Sets module ID base (DLLPlugin) |
injectTypeType: String
Default: styleTag
Allows to setup how styles will be injected into the DOM.
Possible values:
styleTagsingletonStyleTaglazyStyleTaglazySingletonStyleTaglinkTagstyleTagAutomatically injects styles into the DOM using multiple <style></style>. It is default behaviour.
component.js
import './styles.css';
Example with c Locals (CSS Modules):
component-with-css-modules.js
import styles from './styles.css';
const divElement = document.createElement('div');
divElement.className = styles['my-class'];
All locals (class names) stored in imported object.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
// The `injectType` option can be avoided because it is default behaviour
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
'css-loader',
],
},
],
},
};
The loader inject styles like:
<style>
.foo {
color: red;
}
</style>
<style>
.bar {
color: blue;
}
</style>
singletonStyleTagAutomatically injects styles into the DOM using one <style></style>.
⚠ Source maps do not work.
component.js
import './styles.css';
component-with-css-modules.js
import styles from './styles.css';
const divElement = document.createElement('div');
divElement.className = styles['my-class'];
All locals (class names) stored in imported object.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: { injectType: 'singletonStyleTag' },
},
'css-loader',
],
},
],
},
};
The loader inject styles like:
<style>
.foo {
color: red;
}
.bar {
color: blue;
}
</style>
lazyStyleTagInjects styles into the DOM using multiple <style></style> on demand.
We recommend following .lazy.css naming convention for lazy styles and the .css for basic style-loader usage (similar to other file types, i.e. .lazy.less and .less).
When you lazyStyleTag value the style-loader injects the styles lazily making them useable on-demand via style.use() / style.unuse().
⚠️ Behavior is undefined when
unuseis called more often thanuse. Don't do that.
component.js
import styles from './styles.lazy.css';
styles.use();
// For removing styles you can use
// styles.unuse();
component-with-css-modules.js
import styles from './styles.lazy.css';
styles.use();
const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];
All locals (class names) stored in locals property of imported object.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
exclude: /\.lazy\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.lazy\.css$/i,
use: [
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
'css-loader',
],
},
],
},
};
The loader inject styles like:
<style>
.foo {
color: red;
}
</style>
<style>
.bar {
color: blue;
}
</style>
lazySingletonStyleTagInjects styles into the DOM using one <style></style> on demand.
We recommend following .lazy.css naming convention for lazy styles and the .css for basic style-loader usage (similar to other file types, i.e. .lazy.less and .less).
When you lazySingletonStyleTag value the style-loader injects the styles lazily making them useable on-demand via style.use() / style.unuse().
⚠️ Source maps do not work.
⚠️ Behavior is undefined when
unuseis called more often thanuse. Don't do that.
component.js
import styles from './styles.css';
styles.use();
// For removing styles you can use
// styles.unuse();
component-with-css-modules.js
import styles from './styles.lazy.css';
styles.use();
const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];
All locals (class names) stored in locals property of imported object.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
exclude: /\.lazy\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.lazy\.css$/i,
use: [
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
'css-loader',
],
},
],
},
};
The loader generate this:
<style>
.foo {
color: red;
}
.bar {
color: blue;
}
</style>
linkTagInjects styles into the DOM using multiple <link rel="stylesheet" href="path/to/file.css"> .
ℹ️ The loader will dynamically insert the
<link href="path/to/file.css" rel="stylesheet">tag at runtime via JavaScript. You should use MiniCssExtractPlugin if you want to include a static<link href="path/to/file.css" rel="stylesheet">.
import './styles.css';
import './other-styles.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.link\.css$/i,
use: [
{ loader: 'style-loader', options: { injectType: 'linkTag' } },
{ loader: 'file-loader' },
],
},
],
},
};
The loader generate this:
<link rel="stylesheet" href="path/to/style.css" />
<link rel="stylesheet" href="path/to/other-styles.css" />
attributesType: Object
Default: {}
If defined, the style-loader will attach given attributes with their values on <style> / <link> element.
component.js
import style from './file.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: 'style-loader', options: { attributes: { id: 'id' } } },
{ loader: 'css-loader' },
],
},
],
},
};
<style id="id"></style>
insertType: String|Function
Default: head
By default, the style-loader appends <style>/<link> elements to the end of the style target, which is the <head> tag of the page unless specified by insert.
This will cause CSS created by the loader to take priority over CSS already present in the target.
You can use other values if the standard behavior is not suitable for you, but we do not recommend doing this.
If you target an iframe make sure you have sufficient access rights, the styles will be injected into the content document head.
StringAllows to setup custom query selector where styles inject into the DOM.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
insert: 'body',
},
},
'css-loader',
],
},
],
},
};
A new <style>/<link> elements will be inserted into at bottom of body tag.
FunctionAllows to override default behavior and insert styles at any position.
⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like
let,const,arrow function expressionand etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only DOM core level 2 properties, but it is depends what browsers you want to support
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
// eslint-disable-next-line no-underscore-dangle
var lastInsertedElement =
window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
// eslint-disable-next-line no-underscore-dangle
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
],
},
],
},
};
Insert styles at top of head tag.
baseThis setting is primarily used as a workaround for css clashes when using one or more DllPlugin's. base allows you to prevent either the app's css (or DllPlugin2's css) from overwriting DllPlugin1's css by specifying a css module id base which is greater than the range used by DllPlugin1 e.g.:
webpack.dll1.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
webpack.dll2.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: 'style-loader', options: { base: 1000 } },
'css-loader',
],
},
],
},
};
webpack.app.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{ loader: 'style-loader', options: { base: 2000 } },
'css-loader',
],
},
],
},
};
The loader automatically inject source maps when previous loader emit them.
Therefore, to generate source maps, set the sourceMap option to true for the previous loader.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
],
},
],
},
};
There are two ways to work with nonce:
attributes option__webpack_nonce__ variable⚠ the
attributesoption takes precedence over the__webpack_nonce__variable
attributescomponent.js
import './style.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
attributes: {
nonce: '12345678',
},
},
},
'css-loader',
],
},
],
},
};
The loader generate:
<style nonce="12345678">
.foo {
color: red;
}
</style>
__webpack_nonce__create-nonce.js
__webpack_nonce__ = '12345678';
component.js
import './create-nonce.js';
import './style.css';
Alternative example for require:
component.js
__webpack_nonce__ = '12345678';
require('./style.css');
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
The loader generate:
<style nonce="12345678">
.foo {
color: red;
}
</style>
Inserts styles at top of head tag.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
var lastInsertedElement =
window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
],
},
],
},
};
Inserts styles before #id element.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
insert: function insertBeforeAt(element) {
const parent = document.querySelector('head');
const target = document.querySelector('#id');
const lastInsertedElement =
window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, target);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
],
},
],
},
};
Please take a moment to read our contributing guidelines if you haven't yet done so.
FAQs
style loader module for webpack
The npm package style-loader receives a total of 11,514,922 weekly downloads. As such, style-loader popularity was classified as popular.
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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.