gulp-convert-css-var

获取css的变量的具体值，并在变量的上一行加上一行写入了具体值的规则，用于兼容不支持css变量的浏览器

安装

从npm安装

npm install gulp-convert-css-var --save-dev

简单的例子

var gulp = require('gulp');
var convert  = require('gulp-cat');

gulp.task('default', function() {
    return gulp.src('./test.css')
        .pipe(convert());
});

假设test.css的内容为：

:root {
	--BG-0: #ededed;
	--FG-0: rgba(0, 0, 0, .9)
}

@media (prefers-color-scheme: dark){
    :root {
        --BG-0: #191919;
        --FG-0: rgba(255, 255, 255, 0.8);
    }
}

.example {
	margin-top: 20px;
	color: var(--FG-0);
	background: var(--BG-0);
}

.example .test {
	margin: 10px
}

会转化为：

:root {
    --BG-0: #ededed;
    --FG-0: rgba(0, 0, 0, .9);
}

@media (prefers-color-scheme: dark){
    :root {
        --BG-0: #191919;
        --FG-0: rgba(255, 255, 255, 0.8);
    }
}

.example {
    margin-top: 20px;
    color: rgba(0, 0, 0, .9);
    color: var(--FG-0);
    background: #ededed;
    background: var(--BG-0);
}

.example .test {
    margin: 10px;
}