Gulp SASS Sourcemap sources are incorrect

问题:

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.

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));
});

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

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

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

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.

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.

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.

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.

回答1:

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

@ Update 2017-03-08

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.

See my GitHub repo for an example.

---

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.

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.

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.