Gulp Sass Sourcemap源不正确

Question

我正在努力使我的Sass Sourcemaps正确工作。问题似乎是Sourcemap中的"来源"属性以及我的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，GulPJ和相关的NPM软件包。

我的样式表文件夹中的文件夹/资产结构的示例：

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

对于SCSS/SOULCEMAP的根部中的SASS文件正常工作。铬将显示源样式的位置。

对于SCSS/SUCEMAPS中的子文件夹中的SASS文件不起作用。问题是"来源"：属性中列出了错误的文件。

例如，print.scss映射将正确具有"sources":["print.scss"]。但是SectionA/style.scss地图将具有"sources":["style.css"]而不是"sources":["partial/_partialA.scss", "partial/_partialB.scss"]。

我已经确认了移动/scss/sectiona/style.scss to/scss/style.scss，并修改任何导入路径确实可以解决该问题。但是我需要将其嵌套，而不是/scss的根。

如果我能提供更多细节，请告诉我。我尝试了从路径到源地图的答案是错误的，但无法解决我的问题。我还尝试过操纵mapSources而无用。

Answer 1

@ update 2019-05-24

我的答案谈论使用CSSNEXT。CSSNEXT被弃用。我的回答中的理论仍然适用于Postcss-preset-env。

@ Update 2017-03-08

在使用PostCSS实验后，我使用CSSNEXT来处理SASS转换后处理CSS。cssnext自动预订并这样做，将其保留到Sourcemap中的原始SCSS文件的连接。

请参阅我的github回购。

---

遵循Mark的反馈并研究了Gulp-Autoprefixer模块，我相信在GitHub仓库中提出的这个问题与Gulp-Autoprefixer有关，与不正确的SoilCeroot问题有关。

。

使用byscripts的hack变体，我可以用正确的sourceroot获得嵌套SCSS文件的sourcemaps。Byscripts中使用的黑客毛gulpfile Inits两次sourcemaps函数。一次前缀之前，然后一次。

我创建了一个GitHub存储库来尝试说明减少的测试用例和解决方法。检查解决方法生产的CSS显示了与源SCSS的正确关系。