4

我正在努力让我的 SASS 源图正常工作。问题似乎是源映射中的“源”属性以及我的 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 的答案是错误的，它不能解决我的问题。我也尝试过操纵mapSources无济于事。

4

1 回答 1

2

@更新2019-05-24

我的回答是关于使用 CSSNext。CSSNext 已弃用。我的回答中的理论仍然适用于postcss-preset-env。

@ 更新2017-03-08

在尝试了 PostCSS 之后，我使用 CSSNext 来处理 SASS 转换后的 CSS。CSSNext 自动添加前缀并以这种方式保留与源映射中原始 scss 文件的连接。

有关示例，请参阅我的GitHub存储库。

在遵循 Mark 的反馈并调查 gulp-autoprefixer 模块后，我相信在 GitHub 存储库中为 gulp-autoprefixer 提出的这个问题与不正确的 sourceroot 问题有关。

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

我创建了一个 GitHub 存储库来尝试说明简化的测试用例和解决方法。检查解决方法生成的 css 显示与源 scss 的正确关系。

于 2017-01-10T11:05:53.287 回答