Bagaimana untuk menggunakan sifat tersuai CSS dengan berkesan?

Question

Saya sedang membangunkan apl dengan tema tersuai yang membolehkan pengguna memilih warna utama yang digunakan oleh apl untuk menjana satu set 10 varian warna gaya Tailwind. Saya menggunakan javascript untuk menjana warna dan menyuntiknya ke dalam dom, tetapi dalam penyelidikan saya, saya mendapati bahawa tidak mungkin untuk menyuntik pembolehubah scss kerana dom hanya mempunyai akses kepada css yang disusun. Jadi saya terpaksa menggunakan sifat tersuai css dan bukannya warna scss.

Saya tahu ini adalah kes penggunaan yang luar biasa dan bukan cara scss digunakan dengan warna, tetapi saya berharap dapat mencari penyelesaian yang cekap untuk masalah itu daripada menulis semula projek saya.

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

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

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

Masalah utama yang saya hadapi ialah komponen saya mengakses pembolehubah ini seperti ini:

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

Saya menggunakan @use 将 abstracts/colors 添加到我的 main.scss seperti komponen lain, tetapi saya tidak lagi boleh mengakses sifat warna ini.

@use './abstracts' as a;

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

Ini menyebabkan webpack gagal untuk menyusun scss saya dan memaparkan ralat berikut:

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

Saya faham ralat itu, tetapi saya tidak tahu apakah pilihan untuk membetulkannya. Memandangkan saya terjebak menggunakan sifat tersuai css untuk warna, adakah terdapat cara untuk @use mereka, atau adakah saya tersekat untuk mengekalkan semua css berkaitan warna dalam fail yang sama?

Answer 1

Saya tidak menemui cara untuk menggunakan ruang nama SCSS dengan pembolehubah CSS. Jika anda menggunakan @use './abstracts' as *; ia akan berfungsi. Artikel ini memberikan contoh yang baik tentang cara mencipta tema menggunakan scss.