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

Question

项目中用的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的写法。
有没有其他解决方法?

Answer 1

首先，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呢？

Answer 2

我是用bower安装的。
恩，又看了遍手册，Laravel提供了laravel-elixir。之前用的

    mix
        .sass([
            '../../../bower_components/angular-material/angular-material.css',
            '../vendor/bootstrap/dist/css/bootstrap.css',
            '../../../bower_components/ng-sortable/dist/ng-sortable.css',
            '../../../bower_components/components-font-awesome/css/font-awesome.css',
            '../../../bower_components/datatables/media/css/jquery.dataTables.css',
            '../../../bower_components/datatables/media/css/dataTables.bootstrap.css',
            '../../../bower_components/angular-loading-bar/build/loading-bar.css'
        ], 'public/assets/css/vendor.css')

这样既编译又合并了。
改为
mix.styles 只合并应该就可以了

最后，谢谢。