Я использую gulp-postcss и postcss-cssnext для перевода css и получил проблемы
Я использую cssnext, чтобы написать свой css
:root{
--ellipsis: {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
};
и используйте @apply --ellipsis в 3 местах
.div1{
@apply --ellipsis
}
.div2{
@apply --ellipsis
}
.div3{
@apply --ellipsis
}
и я использую gulp и postcss-cssnext
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",
}
кто может спасти меня....
1 ответ
Решение
Оу... я сам исправил....
Я чувствую, что это не моя вина, а проблема gulp-postcss, это самая новая версия, поэтому я устанавливаю старую 6.4.0, и она работает...