Question

我正在尝试通过覆盖sass变量来配置我的vuetify主题。

但是我有点困惑，因为有些变量可以完美地覆盖主题，而另一些则不能。

例如，这可行：

$body-font-family: 'Poppins';
$font-size-root: 14px;

$headings: (
  'h1': (
    'size': 24px,
    'line-height': 1.15em
  ),
  'h2': (
    'size': 18px,
    'line-height': 1.5em
  )
);

但这不起作用：

$border-radius-root: 40px;

$btn-letter-spacing: 5px;
$btn-font-weight: 700;

这是我的切入点：

@import 'theme/map.scss';

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

我的身份证明：

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const theme = require('../theme')

Vue.use(Vuetify)

export default new Vuetify({
  iconfont: 'fa',
  theme: {
    themes: {
      light: {
        primary: theme.colors.primary.base,
        'primary-dark': theme.colors.primary.dark,
        'primary-light': theme.colors.primary.light,

        secondary: theme.colors.secondary.base,
        'secondary-dark': theme.colors.secondary.dark,
        'secondary-light': theme.colors.secondary.light,

        content: theme.colors.content.base,
        'content-dark': theme.colors.content.dark,
        'content-light': theme.colors.content.light,

        danger: theme.colors.danger.base,
        'danger-dark': theme.colors.danger.dark,
        'danger-light': theme.colors.danger.light,

        success: theme.colors.success.base,
        'success-dark': theme.colors.success.dark,
        'success-light': theme.colors.success.light,

        accent: theme.colors.accent
      }
    }
  }
})

还有我的vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/styles/theme/map.scss";`
      }
    }
  },
  transpileDependencies: ['vuetify']
}

我的vuetify版本是vuetify-loader的2.2.11和1.3。

我真的不明白为什么有些var无法正常工作，如果有人能帮助我，那真的很酷。

提前谢谢！

Vuetify不会覆盖所有Sass变量

0 个答案: