Question

我正在努力让我的SASS源图正常工作。问题似乎是源映射中的“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软件包。

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

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

对于SCSS根目录中的SASS文件，源图可以正常工作。 Chrome会显示源样式的位置。

对于SCSS内子文件夹中的SASS文件，源图不起作用。问题是“来源”：属性中列出了错误的文件。

例如，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。我的答案中的理论仍然适用于postcss-preset-env。

@更新2017-03-08

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

请参阅我的GitHub回购中的示例。

在听完Mark的反馈意见并调查gulp-autoprefixer模块之后，我相信gulp-autoprefixer的GitHub repo上出现的issue与不正确的sourceroot问题有关。

使用来自ByScripts的hack的变体，我能够获得具有嵌套scss文件的正确sourceroot的源图。 ByScripts gulpfile中使用的hack在sourcemaps函数中执行两次。前缀之后，之后一次。

我创建了一个GitHub仓库，试图说明减少的测试用例和workaround。检查变通方法生成的css会显示与源scss的正确关系。

Gulp SASS源图源不正确

1 个答案:

@更新2019-05-24

@更新2017-03-08