首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我使用gulp-postcss和postcss-cssnext来翻译css,但是遇到了问题

我使用gulp-postcss和postcss-cssnext来翻译css,但是遇到了问题
EN

Stack Overflow用户
提问于 2017-06-23 18:45:27
回答 1查看 44关注 0票数 0

我使用cssnext来编写我的css

代码语言:javascript
复制
:root{
    --ellipsis: {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    };
};

并在3个地方使用@apply --省略号

代码语言:javascript
复制
.div1{
    @apply --ellipsis
}
.div2{
    @apply --ellipsis
}
.div3{
    @apply --ellipsis
}

我使用gulp和postcss-cssnext

代码语言:javascript
复制
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'))
});

但只有第一个地方是有用的,

代码语言:javascript
复制
.div1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
.div2{
}
.div3{
}

我必须这样写:

代码语言:javascript
复制
: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
}

但这不能写成那样,一定有什么地方不对……

代码语言:javascript
复制
"devDependencies": {
    "autoprefixer": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "postcss-cssnext": "^2.11.0",
}

谁能救我...

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-25 21:32:21

哦...我自己修好的.

我觉得这不是我的错,而是gulp-postcss的问题,它是最新的版本,所以我安装了一个旧的6.4.0,它起作用了……

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44719514

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档