css파일 연결

css 파일을 통해 스타일을 적용하는 두가지 방법에 대해 알아보도록 하겠습니다.

1. static 폴더 이용

첫 번째는 static 폴더 내부에 css 폴더를 생성하여 연결하는 방법입니다.

1.1 index.html

<link rel="stylesheet" href="./css/main.css">

index.html에 주변에서 css폴더를 찾아 그 안에 있는 main.css를 찾을 수 있도록 link태그를 이용해 연결해줍니다.

1.2 main.css

static 폴더 내에 css 폴더를 만들고 그 안에 main.css 파일을 생성해줍니다.

1.3 npm run dev

개발 서버를 오픈해 확인해보면 정상적으로 작동하는 것을 확인할 수 있습니다.

2. 루트 경로

두 번째 방법은 index.html 파일이 위치한 루트 경로에 css폴더를 만드는 방법입니다.

2.1 main.css 파일 생성

루트 경로에 css 폴더를 만들고 그 안에 main.css 파일을 생성해줍니다.

2.2 import를 통해 css파일 가져오기.

mian.js

import css from '../css/main.css'

main.js에 import 키워드를 통해 css 파일을 가져옵니다. 하지만 파일을 가져와 css라는 변수에 담아봐야 그것을 사용할 수 없기 때문에, 아래와 같이 작성할 수 있습니다.

import '../css/main.css'

⭐작동원리 이해하기
webpack.config.js의 entry: './js/main.js' 명시한 것처럼 webpack은 시행되면서 main.js 파일을 먼저 읽어나갑니다. 그렇기 때문에 import 키워드로 가져온 main.css 파일이 읽힐 수 있는 구조가 만들어지게 됩니다.

2.3 외부 패키지 설치(css-loader && style-loader)

하지만 webpack은 css 파일을 읽을 수 없으므로 문제가 발생하게 됩니다. 이를 해결하기 위해서 외부의 패키지를 설치해야 합니다.

$ npm i -D css-loader style-loader

설치가 완료되면 구성옵션을 webpack.config.js에 module옵션을 추가해 아래와 같이 명시 해줍니다.

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

• use에 설치한 패키지 이름을 명시해줍니다.
• test에는 정규표현식을 이용해 작성해줍니다.
  • 작성 순서가 매우 중요합니다. (css-loader가 먼저 해석될 수 있도록 아래에 작성해줍니다.)
  • test에 적힌 내용으로 끝나는 모든 파일들은 설치했던 패키지를 사용(use)하는 것입니다.
  • css-loader : 자바스크립트 파일에서 css 파일을 해석할 수 있도록 해주는 패키지입니다.
  • style-loader : css-loader에 의해 해석되 내용을 index.html의 style 태그에 삽입해줍니다.

2.5 개발 서버 오픈

npm run dev로 개발 서버를 열고 확인하면, 프로젝트에 스타일이 잘 적용된 것을 볼 수 있습니다.

Scss파일 연결

이번에는 SCSS가 적용될 수 있는 환경을 만들어보도록 하겠습니다.

1. 루트 경로에 파일 생성

루트 경로에 css 폴더를 만들고 그 안에 main.css 파일을 생성해줍니다.

2. import를 통해 scss파일 가져오기.

main.js에 import 키워드를 통해 SCSS 파일을 가져옵니다.

import '../scss/main.scss'

3 외부 패키지 설치 (sass-loader && sass)

마찬가지로 webpack은 SCSS 파일을 읽을 수 없으므로 문제가 발생하게 됩니다. 이를 해결하기 위해서 외부의 패키지를 설치해줍니다.

$ npm i -D sass-loader sass // scss 파일 관련 패키지

• sass-loader 패키지: 해당하는 scss파일을 읽어냅니다.
• sass 패키지: sass-loader 패키지를 이용해 scss파일을 읽어낼 때 그 문법을 해석할 수 있도록 돕는 패키지입니다.

설치가 완료되면 구성옵션을 webpack.config.js에 module옵션을 추가해 아래와 같이 명시 해줍니다.(순서를 꼭 맞춰줍니다.)

webpack.config.js

module: {
  rules: [
    {
      test: /\.s?css$/, // .css 또는 .scss로 끝나는 확장자명을 찾습니다.
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

4. 개발 서버 오픈

npm run dev로 개발 서버를 열고 확인하면, 프로젝트에 SCSS 파일에 입력한 스타일이 잘 적용된 것을 볼 수 있습니다.