Невозможно переопределить стили в 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):

  1. Создайте .\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),
    )
    );
  1. В nuxt.config.js добавлять:
    buildModules: ['@nuxtjs/vuetify'],
    vuetify: {
        treeShake: true,
        customVariables: ['~/assets/style/variables.scss']
    }

Подробнее: https://vuetifyjs.com/ru/customization/sass-variables

Другие вопросы по тегам