Невозможно переопределить стили в vuetify
Как я могу переписать реальные классы в Vuetify?
Я создал файл./src/stylus/main.styl, в котором я перезаписываю некоторые текущие настройки vuetify в качестве теста:
@import '~vuetify/src/stylus/settings/_variables'
@import '~vuetify/src/stylus/elements/_typography'
$material-dark.background = green
$body-font-family = Arial
$alert-font-size = 18px
.display-2
font-size: $headings.h6.size !important
font-family: $headings.h3.font-family !important
@import '~vuetify/src/stylus/main'
По некоторым причинам вышеуказанные значения работают только частично. Новые значения, присвоенные $material-dark.background
а также $body-font-family
работать хорошо для всего под theme--dark
Однако когда дело доходит до .display-2
эти значения все еще вызывают исходные настройки для обоих font-size
а также font-family
и переопределить те, которые я добавил в main.styl. Я даже пытался зайти внутрь компонента, который содержит .display-2
сначала в стилусе в качестве языка с областью действия, который не работал, а затем в простом CSS, который не выдает ошибку, но переписывается по умолчанию по умолчанию Vuetify, сгенерированным в файлах app.xxx.css и chunk-vendor.xxx.css.
//component
<style scoped>
h1.display-2{
font-size:20px;
font-family: "Times New Roman";
color:green;
}
</style>
Для этого есть причина?
1 ответ
Некоторые переменные должны быть установлены ДО импорта _variables.styl
потому что они используются для установки других переменных в этом файле. Это работает, потому что Vuetify использует условное присвоение (:=
) в файлах стилуса.
Самый безопасный способ - установить все переменные верхнего уровня перед импортом любых других файлов.
// set these variables before Vuetify does
$body-font-family = Arial
$alert-font-size = 18px
Затем импортировать _variables.styl
так что вы можете переопределить вложенные значения:
@import '~vuetify/src/stylus/settings/_variables'
// now that the $material-dark hash exists, set the background
$material-dark.background = 'green'
Затем импортируйте main.styl
так что классы Vuetify CSS созданы:
// import main to set all styles
@import '~vuetify/src/stylus/main'
// override the CSS classes using stylus variables
.display-2
font-size: $headings.h6.size !important
font-family: $headings.h3.font-family !important
Vuetify использует операторы условного присваивания в файлах стилуса. Так что если вы установите переменную перед @import
будет сохраняться после @import
, Это важно потому что _variables.styl
ссылается на эти переменные внутри.
Именно в этом случае $heading-font-family := $body-font-family
, Тогда $headings
хэш устанавливается с использованием значения $heading-font-family
, Это означает, что к тому времени, когда вы настраивали $body-font-family
, $heading-font-family
было уже установлено значение по умолчанию.
Переопределение .display-2
стили не работали, потому что еще не было. Поэтому, когда вы импортировали main.styl
, он был возвращен к значениям по умолчанию.
Вы можете немного очистить его, разбив его на несколько файлов:
SRC / активы / стилус / variables.styl
// set all top-level variables $body-font-family = Arial $alert-font-size = 18px
ЦСИ / активы / стилус / theme.styl
// set all nested variables $material-dark.background = 'green'
SRC / активы / стилус / app.styl
// override CSS styles .display-2 font-size: $headings.h6.size !important font-family: $headings.h3.font-family !important
SRC / активы / стилус / main.styl
// pull it all together @import 'variables' @import '~vuetify/src/stylus/settings/_variables' @import 'theme' @import '~vuetify/src/stylus/main' @import 'app`
У меня та же проблема, что и у вас, и способ ее решения заключается в удалении scoped
атрибут из <style>
тег.
Надеюсь, это поможет.
В Vuetify 2
, например, если вы хотите переопределить background colour
(nuxt js
):
- Создайте
.\assets\style\variables.scss
@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
background: map-get($blue, 'lighten-5'),
calendar: (background-color: red),
)
);
- В
nuxt.config.js
добавлять:
buildModules: ['@nuxtjs/vuetify'],
vuetify: {
treeShake: true,
customVariables: ['~/assets/style/variables.scss']
}
Подробнее: https://vuetifyjs.com/ru/customization/sass-variables