VueJS/Tailwind CSS/VITE: Gunakan pembolehubah persekitaran sebagai warna tema Tailwind

Question

Saya mempunyai persediaan VueJS dengan Vite, Tailwind CSS dan postcss dan ingin mentakrifkan warna yang berbeza menggunakan pembolehubah dalam fail .env.name kod digunakan Tema warna yang berbeza. < /p>

Saya cuba menggunakan fail yang mengandungi .env

VITE_COLOR="FF0000"

Dan import

dalam tailwind.config.js

<code>...
tema: {
    warna: {
       utama: import.meta.env.COLOR
    }
}
...
</code>

Walau bagaimanapun, saya mendapat ralat berikut:

Ralat sintaks: 'import.meta' tidak boleh digunakan di luar modul

Apakah yang perlu saya ubah untuk menjadikannya berfungsi, atau adakah cara yang lebih baik?

Answer 1

Konfigurasi Tailwind ialah fail CommonJS (bukan modul), jadi anda tidak boleh menggunakan ciri ES6 seperti import

Anda boleh memasang pakej yang dipanggil dotenv

npm i dotenv

Perlu diletakkan di atas fail konfigurasi tailwind, contohnya

require('dotenv').config()

module.exports = {/** */}

在.env中创建颜色变量。请注意，由于我们要求它超出了 Vite 的范围，因此它可能不会带有 VITE_

awalan

ANY_COLOR='#ffc8dd'

Kini anda boleh mengaksesnya dalam konfigurasi tailwind

theme: {
    colors: {
       primary: process.env.ANY_COLOR
    }
}

Ini akan berfungsi tetapi jika anda menukar .env warna dalam fail, anda perlu membina semula gaya itu semula. Jika ia berfungsi untuk anda (satu penggunaan - satu warna pula) - bagus. Saya secara peribadi akan mencadangkan penyelesaian lain berdasarkan pembolehubah CSS - pautan CanIUse

Tentukan pembolehubah dalam fail CSS atau dalam index.html中的标签内创建styletag

:root {
    --theme-color: #ffc8dd;
}

dan dalam konfigurasi

theme: {
    colors: {
       primary: 'var(--theme-color)'
    }
}

Itu sahaja - tiada pakej tambahan, kerja tambahan, jika anda menukar pembolehubah CSS, perubahan akan digunakan serta-merta - walaupun dalam pengeluaran kerana kami menggunakan fungsi CSS