https://github.com/fu1996/var-color-replace-loader
a webpack var color replace loader
https://github.com/fu1996/var-color-replace-loader
loader replace-loader var-color webpack
Last synced: 2 months ago
JSON representation
a webpack var color replace loader
- Host: GitHub
- URL: https://github.com/fu1996/var-color-replace-loader
- Owner: fu1996
- Created: 2022-06-15T03:32:34.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-18T17:02:27.000Z (about 4 years ago)
- Last Synced: 2024-12-27T21:36:12.282Z (over 1 year ago)
- Topics: loader, replace-loader, var-color, webpack
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# var-color-replace-loader
## Install this loader
```shell
npm i -D var-color-replace-loader
```
## How to configure
Take less as an example
```javascript
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader', {
loader: path.resolve(__dirname, 'loaders/afterBabel'),
options: {
// color map object
colorMap: {
'--color-cyan-1': '#f5f8ff',
'--color-emerald-7': '#049160',
'--color-indigo-5': '#41a7fa',
},
}
},]
},
```
Assume that the contents of the current index.less file are
```less
body {
width: 200px;
height: 200px;
background: #f5f8ff;
color: #049160;
border-color: #41a7fa;
color: #adc;
}
```
After being processed by the loader, the content will change to the following code
```css
body {
width: 200px;
height: 200px;
background: var(--color-cyan-1);
color: var(--color-emerald-7);
border-color: var(--color-indigo-5);
color: #adc;
}
```
## Github
https://github.com/fu1996/var-color-replace-loader
If it helps you, please light up star. If there is a need, please mention issue.