时间戳

首页 > 解决方案 > Vuetify：为所有文本定义基色

css - Vuetify：为所有文本定义基色

问题描述

我需要为Vue + Vuetify 项目中的所有文本定义基色。我尝试在 vuetify.ts 上修改主题的原色：

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

但是，这仅适用于某些情况；Vuetify 组件之外的 v-text-input 标签和文本等不会使用此值。有没有什么好的替代方法可以通过 css 显式地对其进行样式设置？

标签： cssvue.jscolorsthemesvuetify.js

解决方案

为了使用 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文件保留需要覆盖的变量。

下面的链接中定义了一个变量列表，即全局变量、组件变量等

Vuetify CSS 变量

希望这可以帮助！

推荐阅读