NUXTJS + Vuetify - SCSS 中的颜色

Posted 2023-02-22

【中文标题】NUXTJS + Vuetify - SCSS 中的颜色

【英文标题】：NUXTJS + Vuetify - Colors in 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

【参考方案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;            

更多？ 见https://vuetifyjs.com/en/features/theme/#custom-properties