cssmin grunt插件在源地图中生成不正确的源url。

Question

cssmin grunt插件grunt-contrib-cssmin在css源文件源url中引导斜杠，从而使css映射不正确。同时，在手工编辑源代码地图文件(向每个源url添加前导斜杠)之后，一切似乎都被正确地映射了。原始源文件取自原始css中的注释(不受限制)，它是由其他grunt插件正确生成的。

我的档案结构：

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

原始css -源urls的原始源地图是正确的。由无齿和无齿的自动固定装置分别产生的：

{"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

  });
};

嗯，这是一个黑客，因为它需要额外的咕噜插件。但它解决了问题。