NUXT JS + Vuetify - цвета в SCSS - PullRequest
Новая
       38

NUXT JS + Vuetify - цвета в SCSS

2 голосов
/ 16 апреля 2020

Я пытаюсь получить цвета из файла nuxt.config. js и поместить их непосредственно в переменные. S css

В настоящее время мои переменные. S css выглядят так 

@import '~vuetify/src/styles/styles.sass';

.button-blue {
    background-color: map-get($blue, darken-2) !important;
    color: map-get($blue-grey, lighten-5) !important;            
}

Я бы хотел назначить цвет непосредственно из nuxt.config, более или менее так: 

@import '~vuetify/src/styles/styles.sass';

.button-blue {
    background-color: primary!important;
    color: seconday !important;            
}

Мой nuxt.config. js

css: ['~/assets/variables.scss'],
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          primary: colors.blue.darken2,
          secondary: colors.orange.darken1,
          tertiary: colors.green.darken1,
          accent: colors.shades.black,
          error: colors.red.accent3,
          info: colors.green.darken3,
          background: '#EAEBEE'
        },
        dark: {
          primary: colors.blue.darken2,
          accent: colors.orange.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          background: colors.red.accent3
        }
      }
    }
  }

Есть предложения? Я использую Vue + Vuetify + Nuxt

1 Ответ

0 голосов
/ 18 апреля 2020

Как это: 

.default-box-layout {
    padding: 15px;
    border: 1px solid var(--v-primary);
    background-color: var(--v-background);
    width: 100%;
    margin: 0;
}
...