Шрифт потрясающего контента в sass с использованием стилей компонентов Angular
Я использую sass для стилизации в моем проекте Угловой 6, и теперь я хочу иметь возможность использовать стиль, специфичный для компонента, используя styleUrls: ['./filename.scss'] в объявлении компонента, вместо того, чтобы иметь только глобальные sass-файлы.
Итак, я последовал за эти инструкции, чтобы заставить это работать в webpack, который отлично работает, за исключением одного: отличный шрифт в CSS-свойстве content. В основном у меня есть компонент со следующим SCSS:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
Мой Webpack выглядит так:
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
Это нормально компилируется с webpack, но я получаю ошибки в консолях браузера, и значки заменяются квадратами.
В Firefox я получаю следующую ошибку:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
А в Chrome я получаю:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
Как я могу включить шрифты в свои sass-файлы для конкретных компонентов?
@Luncho Не уверен, что вы имеете в виду. Вы говорите о шрифте или миксинах? Похоже, миксины генерируют правильный вывод, поскольку я вижу font-family: 'Font Awesome 5 Free';, content: "\f105"; вместе с различными другими свойствами, установленными font-awesome в инспекторе браузера. Проблема в том, что он не может найти шрифт. Все это работало нормально, пока я не переключился на покомпонентный стиль.
@Luncho Я забыл добавить к вопросу, что я установил $fa-font-path во включенный файл, поэтому я обновил свой вопрос, чтобы отразить это.
Я не знаю, как ответить на ваш вопрос, но кое-что еще привлекло мое внимание. Вы импортируете отличный шрифт css в некоторые файлы компонентов, которые могут раздувать ваш набор стилей. Если вы используете этот компонент несколько раз, вы увидите в DOM, что этот стиль применяется несколько раз. Я думаю, вам следует пересмотреть свои потребности и перенести импорт с отличным шрифтом в глобальный файл.
@BunyaminCoskuner Да, SCSS, которым я поделился, на самом деле принадлежит компоненту верхнего уровня app.component.ts, как описано в ссылке в моем сообщении. Так что это глобально
Вы настаиваете на том, чтобы некоторые шрифты были включены только в этот компонент?
@molikh Я хочу включить его в компонент верхнего уровня (app.component.ts), для которого установлен режим инкапсуляции «Нет», так что он в основном глобальный. Я не хочу делать новое включение для каждого компонента, который будет использовать font-awesome. Если есть другой способ иметь некоторый глобальный Sass вместе с Sass для конкретных компонентов, это также было бы приемлемым решением.
Просто чтобы сказать, что вам нужен шрифт 900, для font awesome 5 тоже покажите.
@ShamPooSham У вас есть демонстрация git repo или stackblitz для воспроизведения проблемы?
@ScottChambers Пробовал, не помогло
@Justcode Извините, у меня нет публичного репозитория git, потому что это проект с закрытым исходным кодом, и мне это не разрешено. Создание минимального stackblitz или нового репозитория git только для этого потребует времени, которого у меня, к сожалению, нет. В любом случае, я решил это, перейдя на ng cli. Это не оптимально, но работает прямо сейчас
@ShamPooSham ах, прости. это обычно что не так для меня. Я всегда забываю.
Ответы 3
Вы пробовали импортировать это
@import '~@fortawesome/fontawesome-free/css/all.css';
и удалить
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Надеюсь, это сработает!
Спасибо за предложение. К сожалению, это не работает. Во-первых, all.css не включает scss-миксины, переменные и функции, такие как fa-icon, $fa-var-angle-down и fa-content, поэтому мне нужно перейти на content: '\f105' и т. д. Но даже если я это сделаю, я все равно не получу шрифты. Я не думаю, что all.css включает шрифты, он просто определяет классы css, которые можно использовать в html-коде, и устанавливает для содержимого правильный Unicode.
вы можете использовать это.
https://www.npmjs.com/package/angular2-fontawesome
вы можете включить его в свой файл styles.scss или в файл angular.json
"../../node_modules/font-awesome/css/font-awesome.css"
у этого модуля есть собственный компонент для шрифтов, но вы можете использовать его и так.
<i fa [name] = "'rocket'"></i>
<!-- rendered -->
<i fa class = "fa fa-rocket"></i>
оба работают
Да, я знаю, что могу использовать angular2-fontawesome, но я хотел бы использовать его в scss, используя псевдоселекторы :after и :before вместо создания новых элементов HTML.
Хотя это и не оптимально, я решил это, полностью перейдя на Angular CLI и отказавшись от ручной настройки webpack. Я надеялся, что затем смогу выполнить ng eject и получить получившуюся конфигурацию веб-пакета, но похоже, что разработчики Angular отключили его: /
у шрифтов есть параметры? если да удалите вот так stackoverflow.com/questions/37429519/…