NUXTJS + Vuetify - SCSS 中的颜色

Question

我试图从 nuxt.config.js 文件中获取颜色并将它们直接放在 variables.scss 中

目前我的 variables.scss 看起来像这样

@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

Answer 1

像这样：

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