Gulp SASS源映射源不正确

我正在努力使我的SASS sourcemaps正常工作。问题似乎在于sourcemap中的“sources”属性以及我的SASS文件是如何嵌套的

我有一个将SASS编译成CSS的Gulp任务。这里有一个例子

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软件包

my Stylesheets文件夹中的文件夹/资产结构示例：

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文件，源映射不起作用。问题在于“源”：属性中列出了错误的文件

例如，print.scss映射将正确地包含

“源”：[“print.scss”]

。但是sectionA/style.scss映射将有

“sources”：[“style.css”]

而不是

“sources”：[“partial/_partialA.scss”，“partial/_partialB.scss”]

，正如我所期望的那样

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

如果我能提供更多的细节，请让我知道。我尝试了来自的答案，但它并不能解决我的问题。我还尝试过操纵

mapSources

，但没有成功。

@update2019-05-24 我的回答是关于使用CSSNext。我的回答中的理论仍然适用

@更新2017-03-08 在使用postss进行实验之后，我使用CSSNext在SASS转换后处理CSS。CSSNext自动添加前缀，并以这种方式保留与sourcemap中原始scss文件的连接

有关示例，请参见我的回购协议

---

在遵循Mark的反馈并调查gulp autoprefixer模块后，我认为GitHub repo上针对gulp autoprefixer提出的这一问题与不正确的sourceroot问题有关

使用来自的hack的变体，我能够为嵌套的scss文件获得具有正确sourceroot的sourcemaps。ByScript gulpfile中使用的hack两次初始化sourcemaps函数。前缀前一次，前缀后一次

---

我创建了一个GitHub repo，试图演示一个简化的测试用例和一个新的测试用例。检查解决方案生成的css会显示与源SCS的正确关系。

我看到sourcemaps报告了一些奇怪的行为。write（“../Maps/”尝试删除最后一个斜杠）。/Maps"只是想看看是否有什么不同。我也会对path.styles.src和path.styles.dest做同样的更改。这些更改应该不重要，但我相信我已经看到了一些通过删除这些更改而进行的修复。感谢您的响应标记。我已经删除了尾随斜杠。但这并不影响我的特定问题。我已经尝试了一种非吞咽解决方案来处理这些问题将SCSS作为测试[Preps]，它可以处理嵌套部分的映射。因此我认为问题在于我的吞咽任务。我现在似乎无法确定在哪里！我有另一个建议。通读有时吞咽很难正确设置“来源”值。我刚刚做了一个简化的测试用例。试图了解问题的基本情况。创建了一个带有scss文件夹的项目。其中有一个root.scss和一个嵌套的.scss，它们存在于/nested文件夹中。两者都导入各自的单独部分。在多次尝试删除我传递到各个gulp模块中的任何选项后，我现在可以使用n对gulp autoprefixer的影响。如果我添加前缀，嵌套的sourcemap具有不正确的源数组。如果我不添加前缀，嵌套的sourcemap具有正确的源数组。我正在尝试解决该问题！我可能会在Github上提出问题。这是没有前缀的映射：{“version”：3，“file”：“nested.css”，“sources”：[“nested/nested.scss”，“嵌套/_sameLevel.scss”]，“映射”：“ACAA、AAAA、EAAE、CAAC；EACC、UAAU、EAAE、KAAM；EAClB、UAAU、EAAE、MAAO；EACnB、KAAK、EAAE、IAAK、GACf；；AAED、AAAA、CAAC、CAAC；EACE、KAAK、EAAE、IAAK、GACf”，“名称”：[]，“源根”：./../src/scss}