小编Jab*_*oot的帖子

我试图将css和scss文件合并到我的构建目录中的main.css文件中.它的工作,但不是正确的顺序.scss文件中的样式属性需要位于main.css文件的底部,因此它们会覆盖其余部分.

我的Gulp任务看起来像这样:

    //CSS
gulp.task('css', function () {
    var cssTomincss = gulp.src(['dev/css/reset.css', 'dev/css/style.css','dev/css/typography.css',    'dev/css/sizes.css']);

    var cssFromscss = gulp.src(['dev/css/*.scss'])
        .pipe(sass());

    return es.merge(cssTomincss, cssFromscss)
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

我首先用变量定义源代码.我正在使用gulp-sass插件将scss文件转换为普通的css(.pipe(sass)),然后将两者与es.merge函数合并并将它们连接到main.css中.

问题是,.scss文件的样式属性最终会出现在main.css文件的顶端.我需要他们在底部.所以他们需要在底部连接起来.

有关如何做到这一点的任何线索？

为了覆盖最广泛的浏览器和版本,为CSS添加前缀的正确方法是什么？

版本1:

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本2:

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来,当在转换属性上使用供应商前缀时,我还应该定位我想要转换的供应商前缀属性.

我真的找不到任何关闭.