저는 사용자가 앱에서 10가지 Tailwind 스타일 색상 변형 세트를 생성하는 데 사용하는 기본 색상을 선택할 수 있는 맞춤 테마가 있는 앱을 개발 중입니다. 나는 색상을 생성하고 이를 DOM에 삽입하기 위해 자바스크립트를 사용하지만, 내 연구에서 DOM은 컴파일된 CSS에만 액세스할 수 있기 때문에 scss 변수를 삽입하는 것이 불가능하다는 것을 발견했습니다. 그래서 scss 색상 대신 CSS 사용자 정의 속성을 사용해야 했습니다.
이것은 scss가 색상과 함께 사용되는 방식이 아니라 특이한 사용 사례라는 것을 알고 있지만 프로젝트를 다시 작성하기보다는 문제에 대한 효율적인 해결책을 찾기를 바랍니다.
으아아아 으아아아코드는 완벽하게 작동하지만 이제 내 main.scss 文件变得太大，我使用 7-1 架构模式将其拆分，该模式一直适用于 scss 文件的其他部分，直到我尝试移动这些颜色。具体来说，我将带有自定义颜色的html组件移至abstracts/_colors.scss:
내가 가진 가장 큰 문제는 내 구성 요소가 다음과 같이 이러한 변수에 액세스한다는 것입니다.
으아아아다른 구성 요소와 마찬가지로 @use 将 abstracts/colors 添加到我的 main.scss를 사용하지만 더 이상 이러한 색상 속성에 액세스할 수 없습니다.
이로 인해 webpack이 scss를 컴파일하지 못하고 다음 오류가 표시됩니다.
으아아아오류는 이해하지만 수정할 수 있는 옵션이 무엇인지 모르겠습니다. 색상에 대한 CSS 사용자 정의 속성을 사용하는 데 갇혀 있으므로 이를 @use할 수 있는 방법이 있습니까? 아니면 모든 색상 관련 CSS를 동일한 파일에 유지해야 합니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 변수와 함께 SCSS 네임스페이스를 사용하는 방법을 찾지 못했습니다.
@use './abstracts' as *;를 사용하면 작동합니다. 이 기사는 scss를 사용하여 테마를 만드는 방법에 대한 좋은 예를 제공합니다.