vite 가 CSS, Static Assets, JSON, Dynamic Imports를 처리하는 방법

Client Types

vite는 기본값으로 nodeJS API 타입을 참조합니다.(실제 개발환경이 브라우저가 아니기 때문에)

하지만 결국 브라우저에서 동작하는 코드를 작성하기 때문에

d.ts 파일을 만들어 아래 코드를 작성해줘야 합니다.

/// <reference types="vite/client" />

이로써 얻는 효과는 

1. asset 을 import 할 때 린트가 발생하지 않습니다. (e.g .svg, .png ...)

2. import.data.env 타입을 제공해줍니다.

3. import.meta.hot 타입을 제공해줍니다.

 

아래와 같이 타입선언을 덮어쓸 수 있습니다. " /// "이전에 해주어야합니다.

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

/// <reference types="vite/client" />

 

CSS

1. CSS Pre-processors (전처리기)

vite는 built-in 으로 .scss, .sass, .less, .styl, .stylus 플러그인을 가지고있기 때문에, 별도의 설정없이 모듈만 설치하면 바로 적용이 됩니다. (설정은 필요없으나 모듈은 반드시 설치해주어야합니다)

 

2. CSS Modules

기본적으로 제공합니다(옵션을 설정해줄 수 있습니다).

 

3. PostCSS

postcss.config.js 에 따라 자동으로 반영됩니다.

 

4. @import, url()

각기 다른 파일에서 사용할 시 경로를 자동으로 변경하여 참조해줍니다.

 

5. vue의 single file components 

<style lang="sass"> 바로 사용 가능합니다

 

Static Assets

에셋을 다양한 형태로 불러올 수 있습니다.(참조)

import assetAsURL from './asset.js'
import assetAsURL from './asset.js?url'
import assetAsString from './shader.glsl?raw'
import Worker from './worker.js?worker'
import InlineWorker from './worker.js?worker&inline'

에셋의 경우 public URL 을 기본적으로 반환합니다.

하지만 에셋의 경우 이렇게 import 해도 되지만, 개발환경에서 public 폴더를 생성해 그 내부의 것들은 URL로 접근이 가능합니다.

이때 publicDir을 별도로 설정해 줄 수도 있습니다.

 

 

JSON

바로 import 할 수 있습니다.

typescript 라면 아래 옵션을 추가해 주어야 합니다.

"resolveJsonModule": true

Dynamic Import 

아래와 같이 할 수 있습니다.

tsconfig.json 컴파일 옵션을 module, target 을 요구사항에 맞게 조정해주어야 합니다.

(top-level-await)

module : ES2022

target : ES2017^

const data = await import ('./assets/data.json');

console.log(data)