Vue 3 및 Vuetify 3은 구성 요소의 SCSS/SASS 변수에 액세스합니다.

Question

Vue 3 구성 요소에서 사전 정의된 변수를 사용하고 싶습니다.

으아아아

안타깝게도 "SassError: 정의되지 않은 변수" 오류가 발생합니다. Vuetify의 전역 변수를 사용하려면 무엇을 가져와야 합니까?

Answer 1

이 색상의 사용은 그렇게간단하지는 않습니다.

여기에 문서화되어 있습니다https://vuetifyjs.com/en/functions/sass-variables/#webpack-install 참고 需要 sass-loader@^7.0.0 및 웹팩 구성 변경

구성요소 파일에서 색상 변수를 가져오는 경우 이 단계를 건너뛸 수도 있습니다(../ 개수는 다를 수 있음)

으아아아

다음으로 기억해야 할 것은 객체의 구조입니다

여기 발췌문이 있습니다

으아아아

따라서 색상은 문자열이 아니라 객체에 매핑됩니다(색상 값을 알려면 map-deep-merge），因此您不能使用$red를 참조하세요.

대신 map-deep-get 기능을 사용하여 기본 빨간색을 얻을 수 있습니다

으아아아

이렇게 생겼네요

으아아아