证据：为所有文本定义底色

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。cppstudy想要引起更多关注对此问题。

我需要在Vue + Vuetify项目中为all文本定义基色。我尝试在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文件保留需要覆盖的变量。]​​>

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

Vuetify CSS Variables

希望这会有所帮助！