[React] Webpack CSS 설정 추가하기

webpack 5.x.x, webpack-cli 4.x.x 현재 최신버전으로 설치했다.

.jsx 파일에 .css파일을 import해준다.

style-loader로 style 태그를 만들어서 <head>에 넣어주는 방법과,
mimi-css-extract-plugin으로 파일을 만드는 방법을 알아보자.

npm i -D css-loader style-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/i,
      // css-loader로 css를 불러와서 style-loader로 style 태그로 만들어서 <head>에 넣어준다
      use: ['style-loader', 'css-loader'], // 뒤(css-loader)에서부터 실행된다
    },
  ],
}

webpack 명령어를 실행하면 test에 맞는 조건으로 css파일을 찾아서 css-loader와 style-loader를 순서대로 실행한 후 <head>에 style을 자동으로 넣어준다.

webpack 명령어 실행시 주의사항은 webpack.config.js에 webpack-dev-server관련 내용이 있으면 에러가 나기 때문에 예외처리가 필요하다. 참고

npm i -D mini-css-extract-plugin

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/i,
      // css 파일로 만들고 싶을 때 style-loader대신 사용한다
      use: [MiniCssExtractPlugin.loader, 'css-loader'], // 뒤(css-loader)에서부터 실행된다
    },
  ],
  plugins: [
    new MiniCssExtractPlugin(), // mini-css-extract-plugin 사용시 추가, 상세옵션은 문서를 참고
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
  },
}

index.html

<html>
  <head>
    <link rel="stylesheet" href="./dist/app.css" /> // mini-css-extract-plugin 사용시 추가
  </head>
</html>

webpack 명령어를 실행하면 .css 파일이 output > path에 설정한 경로에 생성된다.

index.html 파일에 <link>를 해주지 않으면 css파일이 적용되지 않으니 주의하자.

저작자표시 비영리 변경금지

'프로그래밍 > React' 카테고리의 다른 글

[React] Editor 선정하기 (0)	2021.08.22
[React] immutable Failed to compile (0)	2020.11.18
[React] 기초 정리 (0)	2020.02.22
[React] Webpack 자동 빌드 (0)	2019.11.27
[React] 강좌 정리 및 초반 설정 (0)	2019.11.02