CODEWITHSUNDEEP
csssass
aceraven777
aceraven777

Reputation: 4556

SASS Source Map pointing to the wrong SASS file

I have 4 SASS files 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

Here's my sample 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>

I'm compiling my SASS file using this command: sass --watch main.sass:style.css

When I check my google chrome inspect element to container or another-container, its pointing to _variables.sass NOT _home.sass. _variables.sass only contain variables. I want it to point to _home.sass.

@update I managed to pinpoint what is causing the error, in the _home.sass in content: '\f0b0', if I remove this the source map is pointing to the correct line, why is this causing the error?

Upvotes: 8

Views: 2075

Answers (2)

Kavinrajsi
Kavinrajsi

Reputation: 492

Try using gulp-sass and gulp-sourcemaps package with below gulpfile.js to render the sass file with source-map 

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'));
});

Upvotes: 3

epsilon42
epsilon42

Reputation: 2013

If you check another browser like Firefox or Safari and it's displaying the source maps correctly then I'd recommend clearing the cache and/or exiting Chrome and firing it up again. This has happened to me on occasion with Chrome and this is how I've been able to resolve it.

Upvotes: 0

Related Questions