찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >Vite 및 Lightning CSS로 CSS를 컴파일합니다

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

Lisa Kudrow
Lisa Kudrow원래의
2025-03-07 16:57:11659검색

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에서 프로젝트를 엽니 다. 이 데모의 경우 ,

, 및 를 삭제하십시오.
    와
  1. 만 남아 있어야합니다. 의 내용을 로 바꾸십시오
    2. vite의 종속성을 설치하십시오 :
  2. 이것은
    3. 와 를 만듭니다. 폴더를 만들고
  3. 내부를 만듭니다. 에
    4. 를 추가하십시오
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 생성

: 
npm install

: reset.css : 로 테스트하십시오 layouts.css lightningcss는 폴백을 제공합니다. 대상 브라우저 지원의 경우 index.html : 를 설치하십시오

구성

:

이것은 LightningCSS 기능을 세밀하게 제어 할 수 있습니다 필요성? 모든 프로젝트에 필수적이지는 않지만 이러한 기술, 특히 대규모 프로젝트 또는 설계 시스템의 경우 조직, 브라우저 크로스 브라우저 호환성 및 CSS 최적화에서 상당한 이점을 제공합니다.

위 내용은 Vite 및 Lightning CSS로 CSS를 컴파일합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json css less html npm sass angular postcss Static define for while select auto public delete this ide
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：앵커 포지셔닝이있는 "온 보딩"UI 중 하나다음 기사：앵커 포지셔닝이있는 "온 보딩"UI 중 하나

관련 기사

더보기