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.

来源：https://stackoverflow.com/questions/40937659/gulp-sass-sourcemap-sources-are-incorrect

标签

gulp

source-maps

gulp-sass

gulp-sourcemaps

gulp-autoprefixer