Question

我正在使用Firefox开发前端应用程序（最新版本41.0.1。），但也有更早的问题。

使用Gulp-Sass，Sourcemap-Support等处理* .sass文件。

这里的样式任务：

var paths = {
  folders : {
    css:        'public/assets/css',
    sass:       'public/src/sass'
  },
  files : {
    css:        'public/assets/css/**/*.css',
    sass:       'public/src/sass/**/*.sass'
  }
};

gulp.task('styles', function () {

if(compileOnly != false) {
  var srcFile = compileOnly;
} else {
  var srcFile = paths.files.sass;
}

var processors = [
  autoprefixer({
    browsers: ["last 2 versions", "> 1%", "ie 8"],
    map: true
  }),
  nano({
    safe: true // Disables Z-Index remanufacturing
  }),
  pxtorem({
    replace: false,
    prop_white_list: ['padding', 'margin', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'font-size', 'line-height', 'letter-spacing', 'top', 'left', 'bottom', 'right'],
    selector_black_list: ['body', 'html']
  }),
  postcssrgba({
    properties: [ "background-color", "background", "color", "border", "border-color", "outline", "outline-color", "box-shadow", "text-shadow" ]
  })
]

return gulp.src([srcFile],{base: paths.folders.sass})
  .pipe( plumber( { errorHandler: onError } ) )
  .pipe(sourcemaps.init())
  .pipe(sass({sourcemap: true, style: 'compact'}))
  .pipe(postcss(processors))
  .pipe(sourcemaps.write('.'))             // Source Map Generation
  .pipe(gulp.dest(paths.folders.css))                  // Output
  .pipe(notify({ message: 'Styles task complete' }));
});

一切正常，源图已经生成，firefox开发者工具正在显示正确的来源：http://jmp.sh/NfErzKf

但是当我点击其中一个资源时，我只会收到此错误：

“无法加载样式文档.http：//****/assets/bower/uikit/scss/core/nav.scss”（免费翻译，因为我的系统语言是德语）

文件在那里，没有任何限制。

当我使用没有依赖关系的新sass文件进行测试时，一切正常。 Chrome完全没有问题。只有Firefox，当我包括bower-dependencies时。它可能是Sass和Scss-Files的混合吗？

此致

Answer 1

经过大量的研究和试验错误我可以跟踪它。

首先，只有在bower（或可能是该级别上的任何其他文件夹）中包含时才会出现错误。如果我从那里注释掉所有的@imports，那一切都没问题。

<强>解决方案：由于Firefox对源映射中的sourceRoot的支持有点错误（same issue in browserify），我建议删除它，因为gulp-sourcemaps默认添加它。

您可以通过将null传递给此选项来删除它：

.pipe(plugins.sourcemaps.write('.', {
    sourceRoot: null
}))

使用bower ressources Firefox“Style-Document无法加载”

1 个答案: