Исходная карта SASS, указывающая на неправильный файл SASS
У меня есть 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 в content: '\f0b0'. Если я удалю это, исходная карта указывает на правильную строку, почему это вызывает ошибку?
@IsmailFarooq, см. Мой обновленный вопрос
переименуйте свой файл home.sass в _home.sass и снова скомпилируйте
@IsmailFarooq, ошибка все еще есть, я снова обновил свой вопрос.
Вы используете GEMSass? или вы используете Node-Sass?
@AmerllicA, я не уверен, node-sass, я думаю ?? Как определить, какой sass я использую?
Когда я набираю sass --version, он выводит 1.9.0 compiled with dart2js 2.0.0-dev.67.0
пожалуйста, упакуйте свой проект в архив и пришлите мне [email protected], я посмотрю и расскажу вам.
Не я установил sass на этот компьютер. Хорошо, я пришлю вам код
отправить весь проект. Я помогу тебе, чувак, не волнуйся.
уже отправил мой проект
попробуйте с помощью этой команды sass --watch main.sass: style.css --sourcemap @ aceraven777
@IsmailFarooq, нет, не работает, я думаю, по умолчанию подразумевается --source-map
@ aceraven777 удалите старый файл и сгенерируйте заново, скомпилировав
@IsmailFarooq, это тоже уже пробовал. Та же проблема
@ aceraven777 вы пробовали gulp-sass
попробуйте сначала импортировать home.sass
Ответы 2
Если вы проверяете другой браузер, например Firefox или Safari, и он правильно отображает исходные карты, я бы рекомендовал очистить кеш и / или выйти из Chrome и снова запустить его. Это случалось со мной время от времени с Chrome, и вот как я смог решить эту проблему.
Я сделал это уже не работает. По умолчанию firefox не поддерживает SASS в элементе проверки. Если вы читаете мой вопрос, удаляю ли я свойство CSS content: '\f0b0', исходная карта отображается правильно. Я не думаю, что это связано с браузером.
Приношу свои извинения, я не обновил эту вкладку, а затем опубликовал свой ответ, поэтому не видел обновления, в котором вы определили причину. Мы не сталкивались с этой проблемой раньше, но вот несколько вещей, которые можно попробовать: 1) добавить пробел в конец юникода FontAwesome, например. content: '\f0b0 ' ... 2) content: unquote('\f0b0 ') ... 3) Объявить @charset 'utf-8';
Попробуйте использовать пакет gulp-sass и gulp-sourcemaps с указанным ниже файлом gulpfile.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'));
});
как вы компилируете sass?