css-selector-loader
v0.1.0
Published
css selector loader module for webpack, load css selectors and their style into js
Downloads
119
Readme
npm install css-selector-loader --save-dev
It's recommended to combine css-selector-loader
with the postcss-loader
file.css
.foo {
width: 100px;
height: 100px;
}
.bar {
width: var(--w)px;
height: var(--h)px;
}
component.js
import {
getFoo as getFooStyle
getBar as getBarStyle
} from './file.css'
fooElement.style.cssText = getFooStyle();
barElement.style.cssText = getBarStyle({
w: 50,
h: 50
});
webpack.config.js
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "css-selector-loader" },
{ loader: "postcss-loader" }
]
}
]
}
}
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|root
|{String}
|./
|helps inline local url(...)'s as data-uri's |
|camelCase
|{Boolean}
|true
|Enable/disable transfering css selectors into camel-case|
|useVarTemplate
|{Boolean}
|true
|Enable/disable use function arguments to replace with css variables|
root
webpack.config.js
{
loader: 'css-selector-loader',
options: {
root: path.resolve(__dirname, 'css')
}
}
camelCase
webpack.config.js
{
loader: 'css-selector-loader',
options: {
camelCase: false
}
}
useVarTemplate
webpack.config.js
{
loader: 'css-selector-loader',
options: {
useVarTemplate: false
}
}