Je développe une application avec un thème personnalisé qui permet à l'utilisateur de sélectionner les couleurs primaires que l'application utilise pour générer un ensemble de 10 variantes de couleurs de style Tailwind. J'utilise javascript pour générer des couleurs et les injecter dans le dom, mais dans mes recherches j'ai découvert qu'il n'est pas possible d'injecter des variables scss car le dom n'a accès qu'au css compilé. J'ai donc dû utiliser des propriétés personnalisées CSS au lieu des couleurs SCSS.

Je sais qu'il s'agit d'un cas d'utilisation inhabituel et non de la façon dont scss est utilisé avec les couleurs, mais j'espère trouver une solution efficace au problème plutôt que de réécrire mon projet.

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

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

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

Le principal problème que j'ai est que mon composant accède à ces variables comme ceci :

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

J'utilise @use 将 abstracts/colors 添加到我的 main.scss comme les autres composants, mais je n'arrive plus à accéder à ces propriétés de couleur.

@use './abstracts' as a;

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

Cela empêche Webpack de compiler mon scss et affiche l'erreur suivante :

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

Je comprends l'erreur, mais je ne sais pas quelles sont les options pour la corriger. Puisque je suis bloqué sur l'utilisation des propriétés CSS personnalisées pour les couleurs, existe-t-il un moyen de les @use, ou suis-je obligé de conserver tous les CSS liés aux couleurs dans le même fichier ?