代码之家 › 专栏 › 技术社区 › aceraven777

SASS源映射指向错误的SASS文件

sass css

aceraven777 · 技术社区 · 7 年前

我有4个sass文件 main.sass , _fonts.sass , _variables.sass , _home.sass .

主.sass

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

_字体.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")

_变量.sass

$yellow: #fce001

_主页.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 inspect元素时 container 或 another-container ,它指向 _变量.sass 不是 _主页.sass . _变量.sass 只包含变量。我想指出 _主页.sass .

@更新我设法查明是什么导致了这个错误,在 _主页.sass 在里面 content: '\f0b0' ,如果删除此项,源映射将指向正确的行,为什么会导致该错误?

2 回复 | 直到 7 年前

kavinraj 7 年前

尝试使用gulp sass和gulp sourcemaps包以及下面的gulp file.js来呈现带有源映射的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'));
});

epsilon42 7 年前

如果你检查另一个浏览器,比如火狐或Safari,它正确地显示了源代码映射,那么我建议清除缓存和/或退出Chrome,然后再次启动它。这在我偶尔使用Chrome时发生过,这就是我解决它的方法。