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

问题描述

我正努力让我的SASS源代码正常工作。问题似乎是sourcemap中的sources属性以及我的SASS文件如何嵌套。

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

  var paths = {
 styles：{
 src：'./ Stylesheets / SCSS /'，
 files：'./Stylesheets/SCSS/**/*.scss'，
 dest：'./Stylesheets/CSS/'
} 
 } 
 $ b 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 /源地图工作正常。 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的根。

如果我可以提供更多的细节请让我知道。我已经尝试了源地图路径错误的答案，并且它没有解决我的问题。我也尝试过操作 mapSources ，但没有结果。 2017-03-08

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

查看我的 GitHub 回购示例。

---

<在遵循Mark的反馈并调查gulp-autoprefixer模块之后，我相信这个问题在GitHub repo上提出的gulp-autoprefixer与不正确的源代码问题有关。

使用 ByScripts 我能够使用正确的源代码来嵌套scss文件。 ByScripts gulp文件中使用的hack在源地图函数中使用两次。

我创建了一个GitHub repo来试图说明一个简化的测试用例和一个解决方法。检查变通办法产生的css显示回到源scss的正确关系。

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.

解决方案

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

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