VueJS/Tailwind CSS/VITE: 환경 변수를 Tailwind 테마 색상으로 사용

Question

Vite, Tailwind CSS 및 postcss가 포함된 VueJS 설정이 있으며 .env.name 파일의 변수를 사용하여 다양한 색상을 정의하고 싶습니다. 코드가 배포되었습니다. 다양한 색상 테마. <

.env

가 포함된 파일을 사용해 보았습니다.

VITE_COLOR="FF0000"

그리고 tailwind.config.js로 가져옵니다

...
주제: {
    색상: {
       기본: import.meta.env.COLOR
    }
}
...

하지만 다음과 같은 오류가 발생합니다. 
<인용문>
구문 오류: 'import.meta'는 모듈 외부에서 사용할 수 없습니다

이 기능을 작동시키려면 무엇을 변경해야 합니까, 아니면 더 좋은 방법이 있습니까? 

Answer 1

Tailwind 구성은 CommonJS 파일(모듈 아님)이므로 import

과 같은 ES6 기능을 사용할 수 없습니다.

dotenv

라는 패키지를 설치할 수 있습니다. 으아악

tailwind 구성 파일 위에 배치해야 합니다. 예를 들어

으아악

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

접두사 으아악

이제 tailwind 구성으로 액세스할 수 있습니다

으아악

이 방법은 작동하지만 파일의 색상을 변경하면 스타일을 다시 다시 작성해야 합니다. 귀하에게 적합하다면(단일 배포 - 어쨌든 단일 색상) - 훌륭합니다. 저는 개인적으로 CSS 변수를 기반으로 다른 솔루션을 제안하고 싶습니다 - .envCanIUse 링크

CSS 파일 또는

태그index.html中的标签内创建style에서 변수 정의 으아악

구성 중

으아악

그렇습니다. 추가 패키지나 추가 작업이 없습니다. CSS 변수를 변경하면 변경 사항이 즉시 적용됩니다. CSS 기능을 사용하기 때문에 프로덕션에서도 마찬가지입니다.