var-color-replace-loader

Install this loader

1npm i -D @fu1996/var-color-replace-loader

How to configure

Take less as an example

1            {
2                test: /\.less$/,
3                use: ['style-loader', 'css-loader', 'less-loader', {
4                    loader: '@fu1996/var-color-replace-loader',
5                    options: {
6                        // color map object
7                        colorMap: {
8                            '--color-cyan-1': '#f5f8ff',
9                            '--color-emerald-7': '#049160',
10                            '--color-indigo-5': '#41a7fa',
11                        },
12                    }
13                },]
14            },

Assume that the contents of the current index.less file are

1body {
2  width: 200px;
3  height: 200px;
4  background: #f5f8ff;
5  color: #049160;
6  border-color: #41a7fa;
7  color: #adc;
8}

After being processed by the loader, the content will change to the following code

1body {
2  width: 200px;
3  height: 200px;
4  background: var(--color-cyan-1);
5  color: var(--color-emerald-7);
6  border-color: var(--color-indigo-5);
7  color: #adc;
8}

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.