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
{}
Into this
{}
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
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"