Question

我有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。

@更新我设法在_home.sass的{{1}}中找出导致错误的原因，如果删除了该错误，则源映射指向正确的行，为什么会导致错误？

Answer 1

尝试在下面的gulpfile.js中使用gulp-sass和gulp-sourcemaps包，以使用源映射呈现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'));
});

Answer 2

如果您检查了其他浏览器（如Firefox或Safari），并且该浏览器正确显示了源地图，则建议您清除缓存和/或退出Chrome，然后再次启动它。有时候，使用Chrome浏览器会发生这种情况，这就是我能够解决它的方式。

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

2 个答案: