Sass - установка семейства шрифтов с материальными веб-компонентами

Я использую материальные веб-компоненты в своем проекте и хочу изменить семейство шрифтов. Я просматривал их документацию и я попытался сделать это, установив переменную в моем файле sass следующим образом:

$mdc-typography-font-family: Comfortaa, sans-serif !default;

Но это не сработало, в документации также говорится, что sass mixin устанавливает шрифт:

mdc-typography-base

Как я могу изменить миксин, чтобы использовать другое семейство шрифтов?


web sass material-components material-components-web
person Marco    schedule 23.01.2018    source источник
comment
Вы добавили <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> в <head>?   -  person Rustem Gareev    schedule 23.01.2018
comment
Да, я это сделал, у меня это в голове   -  person Marco    schedule 23.01.2018

Ответы (1)


arrow_upward
3
arrow_downward

Я понял это, сняв флаг !default:

$mdc-typography-font-family: Comfortaa, sans-serif;

Также не забудьте встроить Google Fonts в тег заголовка:

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
person Rustem Gareev    schedule 23.01.2018
comment
В проекте для меня ничего не изменилось, все по-прежнему имеет шрифт Roboto - person Marco; 24.01.2018
comment
Какая у вас настройка? Как вы импортируете компоненты? - person Rustem Gareev; 24.01.2018
comment
В моем app.sass я импортирую материальные веб-компоненты, подобные этому @import 'material-components-web/material-components-web';, а затем под ним я импортирую файл variables, в котором я установил переменную. - person Marco; 24.01.2018
comment
Вы должны сначала импортировать переменные, и только потом компоненты материала. - person Rustem Gareev; 24.01.2018
comment
Как это будет работать, не будет ли тогда переменная из материальных компонентов переопределить мою переменную? - person Marco; 24.01.2018
comment
Вы были правы, я думал, что затем переопределю свою переменную компонентами материала, если импортирую компоненты материала после файла переменных? - person Marco; 24.01.2018
comment
Sass работает по-другому - потребуется объявление первой переменной. Вот переменные Sass, объясняемые по аналогичному вопросу: stackoverflow.com/a/17090334/9180111 - person Rustem Gareev; 24.01.2018