带有缩小文件的 Sass 源映射 (grunt)答案

【问题标题】：Sass source maps with minified file (grunt)带有缩小文件的 Sass 源映射 (grunt)
【发布时间】：2014-12-24 00:51:48
【问题描述】：

将 Sass 与 sourcemaps 一起使用对我来说在未缩小的 CSS 上效果很好，但在使用我的缩小后的 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'
            }
        }
    },

【问题讨论】：

我也有同样的问题。你有没有设法让它工作？

标签： sass gruntjs minify source-maps

【解决方案1】：

迄今为止，grunt-contrib-cssmin 不支持源映射（请参阅 here 和 here）。

但是，grunt-contrib-sass 和 grunt-autoprefixer 都支持 sourcemaps，所以最好的办法可能是在它们上启用 sourcemaps 并使用未缩小的 css 进行开发和调试。要在 autoprefixer 中启用源映射，只需设置：

options: {
  map: true
}

【讨论】：