我有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
当我检查我的谷歌浏览器检查元素container或another-container,它指向_variables.sassNOT _home.sass._variables.sass只包含变量.我希望它指向_home.sass.
@update我设法找出导致错误的原因,在_home.sass中content: '\f0b0',如果我删除它,源地图指向正确的行,为什么这会导致错误？
尝试使用 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'));
});