A Webpack loader that prefixes classes with custom prefix in React components.
This loader is an Improvement over react-classname-prefix-loader
npm install react-cnpl --save-dev
yarn add react-cnpl --dev
Very simple configuration module loader example:
...
module: {
loaders: [{
...
}, {
test: /\.jsx$/,
exclude: [/node_modules/],
loader: "react-cnpl",
query: {
prefixname:'<prefixname>--'
}
}]
}
...class MyComponent extends React.Component {
render () {
return (
<div className="block">
<div className="block inner">
<h1 className="block inner title_name_">Title</h1>
</div>
</div>
)
}
}<div className="prefixname--block">
<div className="prefixname--block prefixname--inner">
<h1 className="prefixname--block prefixname--inner prefixname--title_name_">Title</h1>
</div>
</div>ignoring classNames and elements
...
module: {
loaders: [{
...
}, {
test: /\.jsx$/,
exclude: [/node_modules/],
loader: "react-cnpl",
query: {
prefixname:'<prefixname>--',
ignore:{
// ignoring elements using array
elements:['div','pre','i'],
// ignoring classname using array
className:['x','y','z']
}
}
}]
}
...Use it with postcss-class-prefix for css files
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent