Ich entwickle eine App mit einem benutzerdefinierten Design, das es dem Benutzer ermöglicht, die Primärfarben auszuwählen, die die App verwendet, um einen Satz von 10 Farbvarianten im Tailwind-Stil zu generieren. Ich verwende Javascript, um Farben zu generieren und sie in den Dom einzufügen, aber bei meiner Recherche habe ich herausgefunden, dass es nicht möglich ist, SCSS-Variablen einzufügen, da der Dom nur Zugriff auf das kompilierte CSS hat. Daher musste ich benutzerdefinierte CSS-Eigenschaften anstelle von SCSS-Farben verwenden.

Ich weiß, dass dies ein ungewöhnlicher Anwendungsfall ist und nicht die Art und Weise, wie SCSS mit Farben verwendet wird, aber ich hoffe, eine effiziente Lösung für das Problem zu finden, anstatt mein Projekt neu zu schreiben.

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
        );
    });
}

Der Code funktioniert perfekt, aber jetzt mein main.scss 文件变得太大，我使用 7-1 架构模式将其拆分，该模式一直适用于 scss 文件的其他部分，直到我尝试移动这些颜色。具体来说，我将带有自定义颜色的html组件移至abstracts/_colors.scss:

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

Das Hauptproblem, das ich habe, ist, dass meine Komponente folgendermaßen auf diese Variablen zugreift:

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

Ich verwende @use 将 abstracts/colors 添加到我的 main.scss wie andere Komponenten, kann aber auf diese Farbeigenschaften nicht mehr zugreifen.

@use './abstracts' as a;

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

Dies führt dazu, dass Webpack mein SCSS nicht kompilieren kann und die folgende Fehlermeldung angezeigt wird:

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

Ich verstehe den Fehler, weiß aber nicht, welche Möglichkeiten es gibt, ihn zu beheben. Da ich daran feststecke, benutzerdefinierte CSS-Eigenschaften für Farben zu verwenden, gibt es eine Möglichkeit, diese zu ändern, oder muss ich alle farbbezogenen CSS-Eigenschaften in derselben Datei behalten? @use