SASS Source Map 指向错误的 SASS 文件答案

【问题标题】：SASS Source Map pointing to the wrong SASS fileSASS Source Map 指向错误的 SASS 文件
【发布时间】：2018-07-13 07:33:31
【问题描述】：

我有 4 个 SASS 文件 main.sass、_fonts.sass、_variables.sass、_home.sass。

main.sass

@import 'fonts'
@import 'variables'
@import 'home'

_fonts.sass

@font-face
    font-family: "FontAwesome"
    font-weight: normal
    font-style: normal
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0")
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg")

_variables.sass

$yellow: #fce001

_home.sass

.container
    color: $yellow
    text-align: right

.another-container
    color: $yellow
    text-align: center

    &:after
        content: '\f0b0'
        font-family: FontAwesome
        font-style: normal
        font-weight: normal
        text-decoration: inherit
        position: absolute
        right: 20px
        display: inline-block
        font-size: 1.1em

这是我的示例 HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hello</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
    <div class="container">
        container
    </div>
    <div class="another-container">
        another-container
    </div>
</body>
</html>

我正在使用以下命令编译我的 SASS 文件：sass --watch main.sass:style.css

当我检查我的 google chrome 检查元素到 container 或 another-container 时，它指向 _variables.sass 而不是 _home.sass。 _variables.sass 只包含变量。我希望它指向_home.sass。

@更新我设法查明导致错误的原因，在content: '\f0b0' 中的_home.sass 中，如果我删除它，源映射指向正确的行，为什么会导致错误？

【问题讨论】：

你是如何编译 sass 的？
@IsmailFarooq，查看我更新的问题
将你的文件 home.sass 重命名为 _home.sass 并再次编译
@IsmailFarooq，错误仍然存在，我再次更新了我的问题。
你使用GEM Sass 吗？或者你正在使用Node-Sass？

标签： css sass

【解决方案1】：

尝试使用 gulp-sass 和 gulp-sourcemaps 包和下面的 gulpfile.js 来渲染带有 source-map 的 sass 文件

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default', function() {
    gulp.src('*.sass')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('css'));
});

【讨论】：

【解决方案2】：

如果您检查其他浏览器（如 Firefox 或 Safari）并且它正确显示源映射，那么我建议您清除缓存和/或退出 Chrome 并再次启动它。 Chrome 有时会发生这种情况，这就是我能够解决的方法。

【讨论】：

我做了这个已经不行了。默认情况下，firefox 在检查元素中不支持 SASS。如果您阅读了我的问题，如果我删除了 CSS 属性 content: '\f0b0'，则源地图显示正确。我认为这与浏览器无关。
抱歉，我没有刷新此选项卡，然后发布了我的答案，因此没有看到您确定导致它的原因的更新。以前没有遇到过这个问题，但这里有一些事情可以尝试：1）在 FontAwesome unicode 的末尾添加一个空格，例如content: '\f0b0 ' ... 2) content: unquote('\f0b0 ') ... 3) 声明@charset 'utf-8';