cssmin grunt 插件在 sourcemap 中生成不正确的源 url

Question

cssmin grunt 插件 grunt-contrib-cssmin 修剪 css sourcemap sources url 中的前导斜杠，从而使 css 映射不正确。同时，在手动编辑 sourcemap 文件（向每个源添加前导斜杠 url）之后，一切似乎都已正确映射。原始 sourcemap 文件取自原始 css（未缩小）中的注释，由其他 grunt 插件正确生成。

我的文件结构：

web (resource root)
├─css
│ └─..(css files)
└─less
  └─..(less files)

原始（未缩小）的 Sourcemap css – 来源 url 是正确的。分别由 grunt-contrib-less 和 grunt-autoprefixer 生成：

{"version":3,"sources":["/less/base/normalize.less","/less/base/boilerplate.less"...

缩小后的源图 css – 源文件的前导斜线消失了。由 grunt-contrib-cssmin:

生成

{"version":3,"sources":["less/base/normalize.less","less/base/boilerplate.less"...

我的一部分gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    cssmin: {
      options: {
        shorthandCompacting: false,
        sourceMap: true,
        roundingPrecision: -1
      },
      target: {
        files: {
          'web/css/style.min.css': 'web/css/style.css'
        }
      }
    }
  });
};

Answer 1

现在我用 grunt-string-replace 插件解决了这个问题。我配置了我的 gruntfile.js 以便它向源映射中的源文件添加前导斜杠：

module.exports = function(grunt) {

  grunt.initConfig({
    'string-replace': {
      dist: {
        files: {
          'web/css/style.min.css.map': 'web/css/style.min.css.map'
        },
        options: {
          replacements: [{
            pattern: /"([^"])*(less\/)/g,
            replacement: '"/less/'
          }]
        }
      }
    }

    // other code

  });
};

好吧，这是一个 hack，因为它需要额外的 grunt 插件。但它解决了问题。

cssmin grunt 插件在 sourcemap 中生成不正确的源 url

cssmin grunt plugin generates incorrect source urls in sourcemap

css

gruntjs

source-maps

grunt-contrib-cssmin

gruntfile