Vuetify：为所有文本定义基色

Question

我需要为 Vue + Vuetify 项目中的所有文本定义基色。我试过在 vuetify.ts:

上修改主题的主色

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#E53935",
      },
    },
  },
})

然而，这仅适用于某些情况； v-text-input 标签和 Vuetify 组件之外的文本等不会使用此值。除了通过 css?

显式设置样式之外，还有什么好的替代方法吗？

Answer 1

为了使用 css 更新变量。您需要如下配置 webpack.config.js。

{
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              // This is the path to your variables
              data: "@import '@/styles/variables.scss'"
            },
            // Requires sass-loader@^8.0.0
            options: {
              // This is the path to your variables
              prependData: "@import '@/styles/variables.scss'"
            },
          },
        ],
      },

里面，styles 文件夹，variables.scss 文件保存需要覆盖的变量。

下面link定义了一个变量列表，即全局变量、组件变量等

Vuetify CSS Variables

希望对您有所帮助！

Vuetify：为所有文本定义基色

Vuetify: defining a base color for all text

css

themes

colors

vue.js

vuetify.js