在 Nuxt 颜色模式下使用 SCSS 变量

Posted

技术标签:

【中文标题】在 Nuxt 颜色模式下使用 SCSS 变量【英文标题】:Using SCSS variables with Nuxt color mode 【发布时间】:2020-12-23 21:08:36 【问题描述】:

我正在尝试将 Nuxt 颜色模式与我现有的 SCSS 样式表一起使用。到目前为止,我已经为整个应用程序中的所有颜色使用了 $primary 和 $secondary 等变量。我想使用nuxt颜色模式来改变主题。示例here 显示了一组 CSS 变量,这些变量根据 html 元素的类而变化,例如(.dark-mode, .light-mode)

如何使用 SCSS 应用此逻辑(根据 html 元素的类更改颜色变量)?

我试过了:

.light-mode 
    $primary: #196b69;
    $accent: #e69496;
    ...

.dark-mode 
    $primary: red;
    $accent: blue;
    ...

还有一点:

$themes: (
    light-mode: (
        primary: #196b69,
        accent: #e69496,
        ...
    ),
    dark-mode: (
        primary: red,
        accent: blue,
        ...
    )
);

但它没有奏效。 在此先感谢您提供的任何帮助或对有用文档的参考! :)

【问题讨论】:

【参考方案1】:
.light-mode 
    --primary: #196b69;
    --accent: #e69496;
    ...

.dark-mode 
    --primary: red;
    --accent: blue;
    ...

$primary: var(--primary);
$accent: var(--accent);

工作,除了我在哪里实现了transparentize($color,$opacity)。我的解决方法是使用opacity 作为单独的规则。

代表 OP 添加

【讨论】:

以上是关于在 Nuxt 颜色模式下使用 SCSS 变量的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误

如何使用环境变量在 Nuxt 中动态导入 SCSS 样式表

将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt

Nuxt Bulma 应用程序无法访问 SCSS 变量

Nuxt & SassError:未定义的变量

Storybook 全局 Scss 变量