主页 / coding / 问题 / 79300011
Accepted
gvlasov
Asked: 2024-12-22 03:49:43 +0800 CST

如何在 SCSS 渐变中使用原色/次色 Vuetify 颜色？

  • 772

我想创建一个从原色到完全透明颜色的线性渐变来突出元素。我在 Vue 3 单文件组件中使用 SCSS。

我按照指南的建议尝试过：

background: linear-gradient(
    to top,
    rgba(var(--v-primary-base), .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

但那不起作用，似乎没有--v-primary-base可用的变量，没有应用颜色。

并且vuetify-settings.scss似乎没有导出与原色/次色相关的内容：

在此处输入图片描述

我可以让它与特定的颜色一起工作，例如：

background: linear-gradient(
    to top,
    rgba(red, .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

图像上的线性渐变

但我需要它是 DRY 并且支持主题。

我的 vite css 配置：

resolve: {
    alias: {
        '@': path.resolve(__dirname, './resources'),
        '@components': path.resolve(__dirname, './resources/ts/Components'),
    },
},
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use '@/css/vuetify-settings';@import "@/css/variables.scss";@import "@/css/app.scss";`
        }
    }
}

我的@/css/vuetify-settings.scss：

@forward 'vuetify/settings';
sass

1 个回答

  1. Best Answer

    正确的变量名是--v-theme-primary：

    background-color: rgba(var(--v-theme-primary), .4);

    不是--v-primary-base

    • 0

相关问题