gulp - sass编译遇到 @media screen\0失败

问题描述

问 题

项目中用的Lavavel5，还用到了angualr-material。在编译
angular-material.css遇到问题。
原css文件存在很多@media screen\0

@media screen\0 {
  [flex] {
    -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
}

我把@media screen\0全部替换为@media screen就能编译通过了。
经查@media screen\0是兼容ie的写法。
有没有其他解决方法?

解决方案

首先，angular-material 添加这个是为了兼容 IE， 我们可以看 angular-metarial 的 source code 中的 build-sass.js看看它是如何build sass， 看代码

  streams.push(
    scssPipe = gulp.src(getPaths())
      .pipe(util.filterNonCodeFiles())
      .pipe(filter(['**', '!**/*.css']))
      .pipe(filter(['**', '!**/*-theme.scss']))
      .pipe(filter(['**', '!**/*-print.scss']))
      .pipe(filter(['**', '!**/*-attributes.scss']))
      .pipe(concat('angular-material.scss'))
      .pipe(gulp.dest(dest))                            // raw uncompiled SCSSS
  );

  streams.push(
    scssPipe
          .pipe(sass())
          .pipe(util.autoprefix())
          .pipe(insert.prepend(config.banner))
          .pipe(addsrc.append(config.cssIEPaths))       // append raw CSS for IE Fixes
          .pipe(concat('angular-material.css'))
          .pipe(gulp.dest(dest))                        // unminified
          .pipe(gulpif(!IS_DEV, minifyCss()))
          .pipe(rename({extname: '.min.css'}))
          .pipe(gulp.dest(dest))                        // minified
  );

注意观察 config.cssIEPaths 这个是包含 @media screen\0 { 这样代码的css文件的路径(例子)， 这个config可以在config.js中查到。

注意观察这些ie_fixes.css并没有在scss文件里，而是 append 到最终的 angular-material.css 文件中，所以我不明白，为什么要用sass再编译一遍css呢？

这篇关于gulp - sass编译遇到 @media screen\0失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！