Gulp SASS源AP源不正确

Question

我有一个将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

例如，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的根目录中。

如果我能提供更多的细节，请让我知道。我试过从路径到源映射的答案是错误的，它不能解决我的问题。我还尝试过操作html" target="_blank">mapsources，但没有成功。

Answer 1

我的回答谈到了如何使用CSSNext。不推荐使用CSSNext。使用postcss-preset-env时，我的答案中的理论仍然适用。

在对PostCSS进行实验之后，我已经使用CSSNext在SASS转换CSS之后对其进行处理。CSSNext自动添加前缀，这样做会保留到源映射中原始scss文件的连接。

参见我的GitHub回购的例子。