Gulp SASS Sourcemap 来源不正确

Question

我正在努力让我的 SASS 源映射正常工作。问题似乎是 sourcemap 中的 "sources" 属性以及我的 SASS 文件是如何嵌套的。

我有一个 Gulp 任务将 SASS 编译为 CSS。这是一个例子

var paths = {
    styles: {
        src: './Stylesheets/SCSS/',
        files: './Stylesheets/SCSS/**/*.scss',
        dest: './Stylesheets/CSS/'
    }
}

gulp.task('compile-sass', function (){
    return gulp.src(paths.styles.files)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths : [paths.styles.src]
        }))
        .pipe(prefix({
            browsers: ['last 2 Chrome versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('../Maps/', {
            includeContent: false,
            sourceRoot: '../SCSS'
        }))
        .pipe(gulp.dest(paths.styles.dest));
});

以上内容适用于其他一切——将映射写入磁盘、添加前缀等。我使用的是最新的 nodejs、gulpjs 和相关的 npm 包。

我的 Stylesheets 文件夹中的 folder/asset 结构示例：

SCSS/print.scss  
SCSS/sectionA/style.scss  
SCSS/sectionA/partial/_partialA.scss  
SCSS/sectionA/partial/_partialB.scss  
SCSS/sectionB/... etc

对于 SCSS/ 根目录中的 SASS 个文件，sourcemaps 工作正常。 Chrome 将显示源样式所在的位置。

对于 SCSS/ 子文件夹中的 SASS 文件，源映射不起作用。问题是 "sources": 属性中列出了错误的文件。

例如 print.scss 地图将正确地具有 "sources":["print.scss"]。但是 sectionA/style.scss 地图将有 "sources":["style.css"] 而不是我期望的 "sources":["partial/_partialA.scss", "partial/_partialB.scss"]。

我已确认将 /SCSS/sectionA/style.scss 移动到 /SCSS/style.scss 并修改任何导入路径确实可以解决问题。但我需要它是嵌套的，而不是在 /SCSS.

的根目录中

如果我可以提供更多详细信息，请告诉我。我已经尝试了 Path to source map is wrong 的答案，但它并没有解决我的问题。我也试过操纵 mapSources 但无济于事。

Answer 1

@更新2019-05-24

我的回答是关于使用CSSNext。 CSSNext was deprecated. The theory in my answer is still applicable using postcss-preset-env.

@更新2017-03-08

在使用 PostCSS 进行试验后，我使用 CSSNext 在 SASS 转换后处理 CSS。 CSSNext 自动添加前缀并以这种方式保留与 sourcemap 中原始 scss 文件的连接。

查看我的 GitHub 存储库示例。

在听取了 Mark 的反馈并调查了 gulp-autoprefixer 模块后，我相信 GitHub 仓库中针对 gulp-autoprefixer 提出的这个 issue 与错误相关sourceroot 问题。

使用 ByScripts 的 hack 变体，我能够为嵌套的 scss 文件获取具有正确 sourceroot 的源映射。 ByScripts gulp 文件中使用的 hack 两次初始化 sourcemaps 函数。前缀前一次，前缀后一次。

我创建了一个 GitHub 存储库来尝试说明一个简化的测试用例和一个 workaround。检查变通方法产生的 css 显示返回源 scss.

的正确关系

Gulp SASS Sourcemap 来源不正确

Gulp SASS Sourcemap sources are incorrect

gulp

source-maps

gulp-sass

gulp-sourcemaps

gulp-autoprefixer

@更新2019-05-24

@更新2017-03-08