我用gulp-postcss和postcss-cssnext翻译css，遇到问题

Question

我用cssnext来写我的css

:root{
    --ellipsis: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    };
};

并在 3 个地方使用 @apply --ellipsis

.div1{
    @apply --ellipsis
}
.div2{
    @apply --ellipsis
}
.div3{
    @apply --ellipsis
}

我用gulp和postcss-css下一个

gulp.task('postcss',function(){
    return gulp.src('src/css/*.css')
        .pipe(plumber())
        .pipe(postcss([
            cssnext({
                browsers: ['last 2 versions', 'Android >= 4.0'],
                features: {
                    rem: false
                }
            })
        ]))
        .pipe(gulp.dest('dist/css'))
});

但是只有第一名有用，

.div1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
.div2{
}
.div3{
}

我必须这样写：

:root{
    --ellipsis: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    };
};
.div1{
    @apply --ellipsis
}
:root{
    --ellipsis: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    };
};
.div2{
    @apply --ellipsis
}
:root{
    --ellipsis: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    };
};
.div3{
    @apply --ellipsis
}

但是这个一定不能这么写，肯定有问题...

"devDependencies": {
    "autoprefixer": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "postcss-cssnext": "^2.11.0",
}

谁能救救我....

Answer 1

哦...我自己修好了....

我觉得不是我的问题，而是gulp-postcss的问题，是最新的版本，所以我安装了一个旧的6.4.0，并且可以使用...

我用gulp-postcss和postcss-cssnext翻译css，遇到问题

i use gulp-postcss and postcss-cssnext to translate css，and got problems

css

gulp

postcss

cssnext