Question

我们说我有这个样式表：

.d1
    width: 10px
    .d2
        width: 20px

它产生以下css代码（具有nested输出样式）：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

源地图（v3）包含以下映射：

AAAA,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,IAAK,GAES;EAHzB,AAEI,GAFD,CAEC,GAAG,CAAC;IACA,KAAK,EAAE,IAAK,GAAG

用this service解码后，我得到了：

([0,0](#0)=>[0,0]) | ([0,0](#0)=>[0,0]) | ([0,3](#0)=>[0,3]) | ([0,4](#0)=>[0,4])
([1,4](#0)=>[1,2]) | ([1,9](#0)=>[1,7]) | ([1,11](#0)=>[1,9]) | ([1,16](#0)=>[1,13]) | ([3,25](#0)=>[1,16])
([0,0](#0)=>[2,2]) | ([2,4](#0)=>[2,2]) | ([0,3](#0)=>[2,5]) | ([2,4](#0)=>[2,6]) | ([2,7](#0)=>[2,9]) | ([2,8](#0)=>[2,10])
([3,8](#0)=>[3,4]) | ([3,13](#0)=>[3,9]) | ([3,15](#0)=>[3,11]) | ([3,20](#0)=>[3,15]) | ([3,23](#0)=>[3,18])

来源是similar fashion node-sass libsass生成的。

我的理解是那些是来自原始文件和结果文件的成对点。但是，让我们从第二行开始，例如最后一对：([3,25](#0)=>[1,16])。第3行第25列？这是意料之外的，你不觉得吗？

我做错了吗？或者源地图不正确？您能否建议生成正确的源地图的方法，如果是的话？

Answer 1

有一个great tool，您不仅可以使用libsass解释here。

请注意，您需要一个文件，其中源地图作为多行注释嵌入，并且其中包含sourcesContent字段，如下所示：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICB3aWR0aDogMTBweDtcbiAgICAuZDIge1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICB9XG59XG4iXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

您只需将其粘贴到“输出”字段中，然后点击“分析”，即可完成设置。在此之前，输入字段中的内容无关紧要。它将被源地图中的内容替换。使用箭头键在映射之间切换。

让我们看一下你如何使用ruby的sass gem：

Gemfile：

source 'https://rubygems.org'
gem 'sass'

package.json：

{
  "dependencies": {
    "convert-source-map": "^1.3.0"
  }
}

1.scss：

.d1 {
    width: 10px;
    .d2 {
        width: 20px;
    }
}

1.js：

var convert = require('convert-source-map');
var fs = require('fs');
console.log(
    convert.fromJSON(
            fs.readFileSync('1.css.map')
    ).toComment()
    .replace(/^\/\//, '/*')
    .replace(/$/, ' */')
);

然后

$ bundle install && npm i
$ rm -f 1.css* && bundle exec sass --sourcemap=inline 1.scss 1.css
$ cat 1.css | head -n -1 && node 1.js
.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

将它放入输出字段即可。

工作流程有点牵扯。但这是检查源地图，然后“手动”进行检查的更加轻松的方式。我在这里谈论自己的经历:)）

如果您有源地图为json ，例如：

{ version: 3,
  sourceRoot: '/path/to/dir',
  sources: [ '1.css' ],
  sourcesContent: [ 'body {\n    background: #ddd;\n}\ndiv {\n    width: 100px;\n    height: 100px;\n    margin: auto;\n    background: #666;\n}\n' ],
  names: [],
  mappings: 'AAAA,AAAA,IAAI,AAAC,CACD,UAAU,CAAE,IAAI,CACnB,AACD,AAAA,GAAG,AAAC,CACA,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CACnB' }

您可以将其转换为注释，如下所示：

var convertSourceMap = require('convert-source-map')
console.log(convertSourceMap.fromJSON(mapAsAString).toComment({multiline: true}));

P.S。以下是some more tools。并且introduction to source maps。此外，sourcemap-codec package可能派上用场。

如何解释源地图映射？

1 个答案: