Шрифт классного контента в sass с использованием стилей компонентов Angular - PullRequest
Новая
       28

Шрифт классного контента в sass с использованием стилей компонентов Angular

0 голосов
/ 19 ноября 2018

Я использую sass для стилей в моем проекте Angular 6 , и теперь я хочу иметь возможность использовать стили для конкретного компонента, используя styleUrls: ['./filename.scss'] в объявлении Компонента, вместо того, чтобы иметь глобальный sass-файлы.

Итак, я следовал этим инструкциям , чтобы все заработало в веб-пакете, который отлично работает, за исключением одной вещи: шрифт потрясающий в 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- специфический компонентфайлы?

Ответы [ 3 ]

0 голосов
/ 24 ноября 2018

Вы можете использовать это.

https://www.npmjs.com/package/angular2-fontawesome

Вы можете включить его в свой файл styles.scss или в свой файл angular.json 

  "../../node_modules/font-awesome/css/font-awesome.css"

у этого модуля есть свой собственный компонент для fontawsome, но вы можете использовать его так же. 

<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>

обе работы

0 голосов
/ 29 ноября 2018

Хотя это и не было оптимальным, я решил эту проблему, полностью перейдя на Angular CLI и отказавшись от ручной настройки веб-пакета.Я надеялся, что смогу затем сделать ng eject и получить полученную конфигурацию веб-пакета, но похоже, что разработчики Angular отключили его: /

0 голосов
/ 22 ноября 2018

Вы пытались импортировать это 

@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";

Надеюсь, это работает!

...