你如何@use css自定义属性？

Question

我正在开发一个具有自定义主题设置的应用程序，允许用户选择一种主色，该应用程序使用该主色生成一组 10 个顺风样式颜色变量。我使用 javascript 生成颜色并将它们注入 dom，但在我的研究中我发现不可能注入 scss 变量，因为 dom 只能访问已编译的 css。因此，我不得不使用 css 自定义属性而不是 scss 颜色。

我知道这是一个不寻常的用例，而不是 scss 是如何与颜色一起使用的，但与其重写我的项目，我希望我能找到一个有效的解决方案。

html {
    // Default Colors
    --color-primary-50: #F2F5FD;
    --color-primary-100: #E4EAFB;
    --color-primary-200: #C5D2F7;
    ...
}

const setPalette = function setPaletteCSS(palette) {
    Object.entries(palette).forEach((entry) => {
        const [step, color] = entry;
        document.documentElement.style.setProperty(
            `--color-primary-${step}`, 
            color
        );
    });
}

代码完美运行，但现在我的

main.scss

文件变得太大了，我正在使用7-1架构模式将它拆分，该模式适用于scss文件的其他部分，直到我尝试移动这些颜色。具体来说，我将带有自定义颜色的 html 组件移动到

abstracts/_colors.scss

:

.
└── scss/
    ├── abstracts/
    │   ├── _colors.scss
    │   └── _index.scss
    └── main.scss

我遇到的主要问题是我的组件像这样访问这些变量：

#site-header, #site-footer {
    color: var(--font-color);
    background-color: var(--color-primary-500);
}

我将

abstracts/colors

添加到我的

main.scss

和

@use

中，就像其他组件一样，但我无法再访问这些颜色属性。

@use './abstracts' as a;

#site-header, #site-footer {
    color: a.var(--font-color);
    background-color: a.var(--color-primary-500);
}

这导致 webpack 无法编译我的 scss 并显示以下错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
   ╷
49 │     color: a.var(--font-color);
   │            ^^^^^^^^^^^^^^^^^^^
   ╵

我明白这个错误，但我不知道我的选择是什么来解决它。由于我坚持使用颜色的 css 自定义属性，有没有办法

@use

它们，或者我是否坚持将所有与颜色相关的 css 保存在同一个文件中？