Gulp SASS Sourcemap 来源不正确 [英] Gulp SASS Sourcemap sources are incorrect

问题描述

我正在努力让我的 SASS 源地图正常工作.问题似乎是源映射中的源"属性以及我的 SASS 文件是如何嵌套的.

I am struggling to get my SASS sourcemaps to work correctly. The problem seems to be the "sources" attribute within the sourcemap and how my SASS files are nested.

我有一个将 SASS 编译为 CSS 的 Gulp 任务.这是一个例子

I have a Gulp task that compiles SASS to CSS. Here is an example of that

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 包.

The above works for everything else - writing maps to disk, prefixing etc. I am using latest nodejs, gulpjs and relevant npm packages.

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

An example of folder/asset structure from within my Stylesheets folder:

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

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

For SASS files in the root of SCSS/ the sourcemaps work properly. Chrome will show where the source styles are.

对于 SCSS/子文件夹中的 SASS 文件，源映射不起作用.问题是来源":属性中列出了错误的文件.

For SASS files in a subfolder within SCSS/ the sourcemaps do not work. The problem is the "sources": attribute has the wrong file listed in it.

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

The print.scss map for example will correctly have "sources":["print.scss"]. But sectionA/style.scss map will have "sources":["style.css"] instead of "sources":["partial/_partialA.scss", "partial/_partialB.scss"] as I would expect.

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

I have confirmed moving /SCSS/sectionA/style.scss to /SCSS/style.scss and amending any import paths does solve the issue. But I need it to be nested, not in the root of /SCSS.

如果我可以提供更多详细信息，请告诉我.我已经尝试了 源地图路径错误的答案，但它没有解决我的问题.我也尝试过操纵 mapSources 无济于事.

If I can provide more detail please let me know. I have tried the answer from Path to source map is wrong and it does not solve my issue. I have also tried manipulating mapSources with no avail.

推荐答案

@2019-05-24更新

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

@ Update 2019-05-24

My answer talks about using CSSNext. CSSNext was deprecated. The theory in my answer is still applicable using postcss-preset-env.

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

After experimenting with PostCSS, I have used CSSNext to process the CSS after SASS has converted it. CSSNext auto-prefixes and doing it this way retains the connection to the original scss files in the sourcemap.

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

See my GitHub repo for an example.

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

After following Mark's feedback and investigating the gulp-autoprefixer module I believe this issue raised on the GitHub repo for gulp-autoprefixer is related to the incorrect sourceroot problem.

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

Using a variation of the hack from ByScripts I am able to get sourcemaps with the correct sourceroot for nested scss files. The hack used in the ByScripts gulpfile inits the sourcemaps function twice. Once before prefixing, and once after.

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

I have created a GitHub repo to try and illustrate a reduced test case and a workaround. Inspecting the css produced by the workaround shows the correct relationship back to the source scss.

这篇关于Gulp SASS Sourcemap 来源不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！