Vite 및 Lightning CSS로 CSS를 컴파일합니다-CSS 튜토리얼-php.cn

태그에 직접 적용하는 동안 현재는 불가능하지만 Vite를 사용하면 조직 목적으로이를 시뮬레이션 할 수 있습니다.

집

웹 프론트엔드

CSS 튜토리얼

Vite 및 Lightning CSS로 CSS를 컴파일합니다

Lisa Kudrow

Mar 07, 2025 pm 04:57 PM

Compiling CSS With Vite and Lightning CSS CSS 발전으로 현재 상태를 유지하면 종종 브라우저 호환성 문제가있는 것을 의미합니다. 광범위한 기능 릴리스에서도 사용자 브라우저 버전이 지연 될 수 있습니다. 우리는 기능 감지 (

), 점진적 향상 및 폴리 플릴을 통해이를 다룹니다. 빌드 도구는 추가 지원을 제공합니다.

많은 CSS 개발자가 사전 프로세서 (SASS, Less)를 활용하지만 Nesting 및 Custom Properties와 같은 기본 CSS 기능의 진화로 인해 필요성이 줄어들 었습니다. 사전 프로세서는 주로 조직의 이점과 확장 된 CSS 기능을 제공했습니다. Postcss와 같은 후 처리 도구는 자동 준비 및 미니 화와 같은 작업을 처리합니다. 일반적인 빌드 파이프 라인은 종종 다음과 관련이 있습니다 @supports 정적 자산 생성 응용 프로그램 파일 빌딩 배포를위한 번들링

CSS 처리는 일반적으로 사전 및 사후 처리를 포함하는 첫 번째 단계에 속합니다. 현대 CSS는 사전 프로세서에 대한 의존도를 줄여 잠재적으로 프로세스를 간소화 할 수 있습니다. 매우 인기있는 빌드 도구 인 Vite는 JavaScript 프론트 엔드 프레임 워크 (Angular, React, Svelte, Vue)를 구축하는 데 탁월합니다. 속도와 적응성은 귀중한 자산입니다. JavaScript로 주로 알려져 있지만 Vite는 JavaScript 코드없이 CSS를 완벽하게 처리합니다. SASS (별도의 설치가 필요)를 지원하고 최소한의 구성으로 CSS를 컴파일합니다. 이 자습서는 노드와 NPM을 사용합니다. 그것들을 설치했는지 확인하십시오. 새 프로젝트를 만듭니다 :

기본 템플릿에 대해 "바닐라"및 "JavaScript"를 선택하십시오. IDE에서 프로젝트를 엽니 다. 이 데모의 경우 ,

, 및 를 삭제하십시오.

만 남아 있어야합니다. 의 내용을 로 바꾸십시오
이것은

폴더를 만들고

내부를 만듭니다. 에

를 추가하십시오

~~css를~~

: 에 추가하십시오

vite 빌드 명령을 실행하십시오

폴더에는 내장 된 파일이 포함되어 있습니다. (고유 한 해시 포함)는 최소화 된 CSS를 보여줍니다 더 빠른 반복을 위해 Vite의 개발 서버를 사용하십시오 :

이것은 포트 5173에서 서버를 시작합니다. HTML 또는 CSS의 변경 사항은 즉시 반영됩니다. 서버를 중지하려면 를 사용하십시오 캐스케이드 층으로 구성 캐스케이드 레이어를

태그에 직접 적용하는 동안 현재는 불가능하지만 Vite를 사용하면 조직 목적으로이를 시뮬레이션 할 수 있습니다.

에서, 층을 정의하십시오 :

<link> 생성 및 CSS 재설정 (예 : Mayank 's)을 가져 오십시오 main.css

레이어

npm create vite@latest

로그인 후 복사

로 를 작성하십시오

reset.css 및 in

<!DOCTYPE html>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

로그인 후 복사

에 링크를 추가하여 원하는 순서를 유지합니다. 이 접근법은 CSS 우선 순위 및 그룹화를 관리하는 데 도움이됩니다 lightningcsss 를 사용한 후 처리 후 ~~lightningcss는 크로스 브라우저 호환성을 향상시킵니다. 설치하십시오 :~~

layouts.css layouts 생성