sfcode
An Online Competing and Development Environment
|
Inject CSS into the DOM.
To begin, you'll need to install 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
component.js
webpack.config.js
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) |
**esModule ** | {Boolean} | false | Use ES modules syntax |
Type: String
Default: styleTag
Allows to setup how styles will be injected into the DOM.
Possible values:
styleTag
singletonStyleTag
lazyStyleTag
lazySingletonStyleTag
linkTag
Automatically injects styles into the DOM using multiple <style></style>
. It is default behaviour.
component.js
Example with Locals (CSS Modules):
component-with-css-modules.js
All locals (class names) stored in imported object.
webpack.config.js
The loader inject styles like:
Automatically injects styles into the DOM using one <style></style>
.
⚠ Source maps do not work.
component.js
component-with-css-modules.js
All locals (class names) stored in imported object.
webpack.config.js
The loader inject styles like:
Injects 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
unuse
is called more often thanuse
. Don't do that.
component.js
component-with-css-modules.js
All locals (class names) stored in locals
property of imported object.
webpack.config.js
The loader inject styles like:
Injects 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
unuse
is called more often thanuse
. Don't do that.
component.js
component-with-css-modules.js
All locals (class names) stored in locals
property of imported object.
webpack.config.js
The loader generate this:
Injects 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">
.
webpack.config.js
The loader generate this:
Type: Object
Default: {}
If defined, the style-loader
will attach given attributes with their values on <style>
/ <link>
element.
component.js
webpack.config.js
Type: 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.
Allows to setup custom query selector where styles inject into the DOM.
webpack.config.js
A new <style>
/<link>
elements will be inserted into at bottom of body
tag.
Allows 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 expression
and 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
Insert styles at top of head
tag.
This 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
webpack.dll2.config.js
webpack.app.config.js
Type: Boolean
Default: false
By default, style-loader
generates JS modules that use the CommonJS modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
You can enable a ES module syntax using:
webpack.config.js
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
There are two ways to work with nonce
:
attributes
option__webpack_nonce__
variable⚠ the
attributes
option takes precedence over the__webpack_nonce__
variable
component.js
webpack.config.js
The loader generate:
create-nonce.js
component.js
Alternative example for require
:
component.js
webpack.config.js
The loader generate:
Inserts styles at top of head
tag.
webpack.config.js
Inserts styles before #id
element.
webpack.config.js
Please take a moment to read our contributing guidelines if you haven't yet done so.
./.github/CONTRIBUTING.md "CONTRIBUTING"