요소의 SCSS 변수를 재정의하여 사용자 정의 테마를 구현하는 방법은 무엇입니까?

요소 UI 테마를 사용자 정의하십시오 : SCSS 변수 오버레이 메소드

요소 UI 프로젝트에서는 테마를 유연하게 사용자 정의하는 것이 중요합니다. 이 기사에서는 요소 UI의 SCSS 변수를 재정의하여 개인화 된 주제를 쉽게 만들 수있는 방법을 자세히 설명합니다.

Element UI의 theme-chalk 테마는 SCSS를 기반으로 작성되어 변수를 수정하여 테마 사용자 정의를 구현할 수 있습니다. 그러나 요소 UI가 제공하는 사전 컴파일 된 CSS 파일의 변수 값은 고정되어 있습니다. 변수 덮어 쓰기를 구현하려면 요소 UI의 SCSS 소스 파일을 사전 컴파일 된 CSS 파일 대신 직접 소개해야합니다 .

SCSS 변수를 덮어 쓰는 이유는 무엇입니까?

SCSS 컴파일러는 순서대로 코드를 처리하기 때문입니다. 요소 UI의 SCSS 소스 파일을 가져 오기 전에 정의하는 변수는 컴파일러에서 먼저 읽히므로 소스 파일에서 동일한 이름으로 변수를 덮어 씁니다.

예를 들어, element-variables.scss 라는 파일을 만들고 다음 코드를 추가하십시오.

 /* 테마의 기본 색상 수정*/
$-색상 : #007bff; // 예를 들어, 파란색으로 변경/* 설정해야합니다. 아이콘 글꼴 경로*/
$ -Font-Path : '~ Element-Ui/Lib/Theme-Chalk/Fonts';

@Import "~ Element-Ui/Packages/Theme-Chalk/Src/Index";

이 파일에서는 먼저 새 $--color-primary 변수를 정의한 다음 요소 UI의 SCSS 소스 파일을 가져옵니다. @import 문의 순서가 중요하므로 요소 UI 변수 이전에 컴파일러가 사용자 정의 변수를 처리 할 수 ​​있습니다.

@import 와 import 의 차이점

가져 오는 두 가지 방법 :

1. @import "~element-ui/packages/theme-chalk/src/index"; 이것은 요소 UI의 SCSS 소스 코드를 가져 오는 SCSS의 가져 오기 명령문입니다. 변수 오버레이를 지원합니다.
2. import 'element-ui/lib/theme-chalk/index.css'; 이것은 사전 컴파일 된 CSS 파일을 가져 오는 JavaScript 가져 오기 명령문입니다. 가변 덮어 쓰기는 지원되지 않습니다 .

둘 다 상호 배타적입니다. SCSS 가져 오기 메소드를 사용하기로 선택할 때 동시에 CSS 파일을 소개 할 필요가 없습니다.

요약

사용자 정의 SCSS 파일을 작성하고 새 변수를 정의하고 올바른 순서로 요소 UI의 SCSS 소스 파일을 가져 오면 사용자 정의 테마를 만듭니다. 프로젝트 입력 파일은 사전 컴파일 된 CSS 파일과의 충돌을 피하기 위해이 사용자 정의 SCSS 파일 만 소개해야합니다.

위 내용은 요소의 SCSS 변수를 재정의하여 사용자 정의 테마를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!