简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
VueJS/Tailwind CSS/VITE: 환경 변수를 Tailwind 테마 색상으로 사용
Linda Hamilton
Linda Hamilton 2023-08-26 14:31:22
0
1
380

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

.env

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

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

... 주제: { 색상: { 기본: import.meta.env.COLOR } } ...
하지만 다음과 같은 오류가 발생합니다. 
 <인용문> 
구문 오류: 'import.meta'는 모듈 외부에서 사용할 수 없습니다
  
이 기능을 작동시키려면 무엇을 변경해야 합니까, 아니면 더 좋은 방법이 있습니까?
Linda Hamilton
Linda Hamilton

모든 응답 (1)
P粉212114661
P粉2121146612023-08-27 00:20:24 1층

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

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

dotenv

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

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

으아악

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

접두사 으아악

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

으아악

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

CSS 파일 또는

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

구성 중

으아악

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

좋다+0
답글 추가
    인기 주제
    더>
    인기 기사
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！