All Articles

리액트 - 절대경로로 import 하기 (WebStorm 기준)

설정 파일 생성

리액트 프로젝트 루트 디렉토리에 jsconfig.json 파일을 생성하고 아래 내용을 작성한다. 이미 생성했다면 기존 설정 코드 아래에 추가한다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "baseUrl": ["src"]
}

src 디렉토리 Resource Root로 지정

웹스톰 사용 시 src 디렉토리를 Resource Root로 지정하는 것까지 해줘야 에러가 나지 않는다.

src 디렉토리 우클릭 - Mark Directory as - Resource Root 지정

Resource root 지정

이제 App.js 파일에서 App.css를 import 할 때 절대경로로 지정할 수 있다.

// 상대경로
import ./'App.css';

// 절대경로
import 'App.css';