prefix-css-loader
Webpack loader to prefix css selectors
Installation
npm install prefix-css-loader --save
Description
A tool for when you have the need to prefix all your css with the same selector. Useful for embedding componenets without a shadow dom and not change the styles on the host page.
Converts this
h1 {
color: red;
}
@media screen and (min-width: 768px) {
h1 {
color: blue;
}
}Into this
.my-class h1 {
color: red;
}
@media screen and (min-width: 768px) {
.my-class h1 {
color: blue;
}
}Usage
In webpack config use the loader for your css/style files.
{
test: /\.css$/,
use: [
"css-loader",
{
loader: "prefix-css-loader",
options: {
selector: ".my-class",
exclude: null,
minify: false
}
}
]
}Options
selector- The selector prefix to use. Can be any css selector.
- Type:
string - Required: Throws error if omitted.
- Example:
".my-class","#my-id","my-tag","#my-id.my-class"
exclude- Regular expression for selectors to exclude from update. Excluded selectors are unchanged.
- Type:
string|RegExp - Optional: No exclution by default.
- Example:
"h1",/h1/,".label",/.label/
minify- Minify css. Remove comments and whitespaces.
- Type:
boolean - Optional: By default minify on production mode.
Query params
- Options can be passed via webpack config or as query params on import.
- Query params takes precedence over webpack config for that specific file.
import "styles.css?selector=.my-class";@import
One stylesheet can include another stylesheet with the @import rule. To also prefix that file use importLoaders option on css-loader.
[
{
loader: "css-loader",
options: {
//Include 1 previous loader for @import. ie use prefix-css-loader for @import.
importLoaders: 1
}
},
{
loader: "prefix-css-loader",
options: {
selector: ".my-class"
}
}
]