Это мой первый опыт работы с Compass и столкнулся с проблемой, связанной с сжатыми SCSS-файлами Compass.Compass удаляет точку с запятой при сжатии файлов SCSS, вызывая проблему импорта CSS
У меня был простой .scss
файл со следующим кодом:
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
.fa-apple, .fa-android, .fa-twitter {
font-size: 60px;
}
мне определить Gulp
задачу компиляции файла и здесь является задача:
gulp.task('compass', function() {
gulp.src('app/scss/style.scss')
.pipe(compass({
config_file: './config.rb',
css: 'app/css',
sass: 'app/scss',
require: ['susy', 'breakpoint']
}))
.pipe(gulp.dest('app/css'));
});
И это мой config.rb
:
require 'susy'
require 'breakpoint'
project_type = :stand_alone
http_path = "/"
sass_dir = "app/scss"
css_dir = "app/css"
images_dir = "app/images"
fonts_dir = "app/fonts"
javascript_dir = "app/js"
line_comments = true
preferred_syntax = :scss
output_style = :compressed
relative_assets = true
Поэтому я установил output_style
до :compressed
, чтобы минимизировать результат CSS
. Это то, что я получил в файле результат css
:
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css").fa-apple,.fa-android,.fa-twitter{font-size:60px}
Compass
удалена окончание точки с запятой в @import
заявления, которое приводит к неожиданному стайлинга на этой странице.
Когда я сменил output_style
на :expanded
, страница работала хорошо с неопубликованной версией css
с сохранением точки с запятой.
Есть ли способ избежать Compass
от удаления точки с запятой? И почему это должно произойти?
Отличный ответ! Потрачено столько времени на это! Благодаря! –