module( = package)

모듈이라는 것은 특정 기능을 가지고있는 자바스크립트 파일을 의미한다. npm 생태계에서는 그걸 패키지라고 부른다.

CSS를 읽어주는 외부 패키지 설치

웹팩은 css를 직접 읽을 수 없다.
CSS 읽는 것을 도와주는 외부의 패키지를 설치한다.

$ npm i -D css-loader style-loader

• css-loader
• style-loader
  두가지 패키지가 설치 된다.

webpack.config.js 파일 module 옵션 추가

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

1. test: test: /\.css$/ 는 정규표현식이다. .css 확장자로 끝나는 모든 파일을 찾는다는 의미이다.
   이를 통해, .css로 끝나는 모든 파일들은 test라는 속성으로 매칭하여 설치했던 패키지를 사용(use)할 수 있다.

2. use:
   use 옵션에는 패키지 이름 순서가 중요하다. style-loader, css-loader는 해당 순서대로 반드시 작성해야한다. 밑에서부터 위로 쓰여진 코드가 실행한다고 생각하면 된다.
   1) css-loader가 먼저 실행
   main.js 파일에서 css 파일을 해석할 수 있도록 해주는 패키지

   2) 해석된 내용을 style-loader가 index.html의 style 태그에 해석된 내용을 삽입해준다.

---

SCSS

위에서 살펴본 내용으로 SCSS 연결을 해보자.

1. 루트 경로에 SCSS 폴더 생성

루트 경로에 SCSS폴더 생성 후, main.scss 파일 생성

2. main.js 파일에 import

import '../scss/main.scss'

main.js에 import 키워드를 통해 SCSS 파일을 가져온다. 진입점 설정을 main.js로 했기 때문에 main.js 파일에 scss 파일을 import해주는 것이다.

3. 외부 패키지 설치

webpack은 SCSS 파일을 직접 읽을 수 없으므로 외부의 패키지를 설치한다.

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

webpack.config.js 파일 module 옵션 추가

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

1. test:
   이전에 작성한 정규표현식 /\.css$/는 css 파일을 읽기 때문에 그 앞에 s?를 붙여 s로 시작하거나 그렇지 않아도 된다는 의미를 부여하여 /\.s?css$/를 입력해준다.

2. use: 순서대로 작성

4. SCSS 작성 테스트

$color--black: #000;
$color--white: #fff;

body {
  background-color: $color--black;
  h1 {
    color: $color--white;
    font-size: 40px;
  }
}

개발 서버 오픈

$ npm run dev

개발 서버를 열어서 확인하면, 프로젝트에 SCSS 파일에 입력한 스타일이 적용 된 것을 확인할 수 있다.