source-maps - CSS源映射可以在子目录中吗

Question

我希望我的源映射是一个子目录，相对于 CSS 目录，例如

styles/css/components/
styles/css/components/maps/

使用我的 base.css 的源地图注释

/*# sourceMappingURL=maps/base.css.map */

在谷歌阅读文档我得到的印象是源映射只需要一个相对路径（我假设相对于 CSS 目录），但是似乎没有浏览器能够读取这个 URL，我做错了什么？

我正在使用 PostCSS 顺便说一句，我的代码是：

postcss: {
  css: {
    src: 'styles/css/components/**.css',
    options: {
      map: {
        inline: false,
        annotation: 'styles/css/components/maps/',
      },
      processors: [
        require('autoprefixer')({browsers: 'last 2 versions'})
      ]
    }
  }
},

Answer 1

如果你使用 gulp，这个插件可以帮助你https://github.com/floridoo/gulp-sourcemaps

var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dist'));
});