[Webpack] module, SCSS

yejine2·2022년 5월 7일
0

[Bundler]

목록 보기
11/11
post-thumbnail

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 파일에 입력한 스타일이 적용 된 것을 확인할 수 있다.

profile
기록하는 프론트엔드 개발자

0개의 댓글