问题描述
我正努力让我的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 repo上提出的gulp-autoprefixer与不正确的源代码问题有关。
使用我能够使用正确的源代码来嵌套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来源不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！