Question

将Sass与sourcemaps配合使用可以很好地解决我的问题，但是使用我的缩小的CSS并不是这样。我猜测这可能是因为引用首先是为编译后的css文件构建的，但随后缩小版本会更改所有内容，引用会失败，可能就是这样吗？如果是这样，我仍然不知道该怎么做。我们非常感谢您寻求解决方案的任何帮助。

这是我的主要* scss文件的最后一行：

/*# sourceMappingURL=mytheme-full.css.map */

我正在思考;如果我只是改为以下，它应该工作。但不！

/*# sourceMappingURL=mytheme-full-min.css.map */

这来自我的Gruntfile.js：

    cssmin: {
        build: {
            files: {
                'sites/all/themes/mytheme/css/mytheme-full-min.css': 'sites/all/themes/mytheme/css/mytheme-full.css'
            }
        }
    },

    sass: {
        dist: {
            options: {
                sourcemap: 'auto'
            },
            files: {
                'sites/all/themes/mytheme/css/mytheme-full.css': 'sites/all/themes/mytheme/sass/mytheme-full.scss'
            }
        }
    },

Answer 1

到目前为止，grunt-contrib-cssmin并不支持源图（请参阅here和here）。

然而，grunt-contrib-sass和grunt-autoprefixer都支持源映射，所以你最好的选择是在这些源映射上启用源映射并使用未经编译的css进行开发和调试。要在autoprefixer中启用源映射，只需设置：

options: {
  map: true
}

使用缩小文件的Sass源映射（grunt）

1 个答案: