https://github.com/clownvary/less-wrapper-loader
Generate a wrapped classname for less files automatically.
https://github.com/clownvary/less-wrapper-loader
less less-loader webpack webpack-loader
Last synced: 3 months ago
JSON representation
Generate a wrapped classname for less files automatically.
- Host: GitHub
- URL: https://github.com/clownvary/less-wrapper-loader
- Owner: clownvary
- License: mit
- Created: 2019-10-14T14:40:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:17:33.000Z (over 3 years ago)
- Last Synced: 2025-01-19T16:10:27.962Z (over 1 year ago)
- Topics: less, less-loader, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 239 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
less-wrapper-loader
[](https://www.npmjs.com/package/less-wrapper-loader)
[](https://travis-ci.com/clownvary/wrap-less-loader)
[](https://codecov.io/gh/clownvary/less-wrapper-loader)
Generate a wrapped classname for less files automatically. It's a easy way to resolve style conflicts.
## example
Before :
```css
.name {
color: red
}
.age {
color: blue;
}
```
After :
```css
.wrapper .name {
color: red
}
.wrapper .age {
color: blue;
}
```
## Getting Started
To begin, you'll need to install `less-wrapper-loader`:
```console
npm install --save-dev less-wrapper-loader
```
1. add loader in webpack.config.js
```javascript
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
...
'less-loader',
{
// must be placed before less-loader
loader: 'less-wrapper-loader',
options: {
nameSpace: 'wrapper'
}
}
]
},
],
},
};
```
2. add a classname **samed with your less-wrapper-loader namespace** in root container component
```javascript
render() {
return (
...
}
```
3. run webpack, all less files you used will be wrapped a classname `wrapper`
## Options
| Name | Type | Default | Description |
|:-------------------:|:-----------------------:|:---------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`nameSpace`** | `{string}` or `{regex}` | `/less/g` | **string:** value will as a namespace wrapped in less file
**regex**: value will test less file path and return matched result as namespace wrapped in less file |
| **`whitePathList`** | `{array[string]}` | `[]` | just wrap less file which it's path contains one of the white list value
default value will wrap all less files |