NUXTJS + Vuetify - SCSS 中的颜色答案

【问题标题】：NUXTJS + Vuetify - Colors in SCSSNUXTJS + Vuetify - SCSS 中的颜色
【发布时间】：2020-07-30 05:08:00
【问题描述】：

我正在尝试从 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

【问题讨论】：

标签： vue.js sass vuetify.js nuxt.js

【解决方案1】：

像这样：

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

【讨论】：

【解决方案2】：

来自文档：

启用 customProperties 还会为每种主题颜色生成一个 css 变量，然后您可以在组件的块中使用它。

所以，当你添加：

  theme: {
    options: { customProperties: true }, // this line
  },

到您的 Vuetify 配置中，变量将被注入到 css 根变量中。现在，您可以使用--v-primary-base 之类的东西，如下所示：

.button-blue {
    background-color: var(--v-primary-base);
    color: var(--v-secondary-base) !important;            
}

【讨论】：