webpack에서 CSS (SCSS) 연결하는 방법 ➰

1️⃣첫 번째 방법. static 안에 css 넣기

1. html 파일에 다음과 같은 link태그로 css를 연결

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

2. static 폴더에 css 폴더를 만들고 그 안에 style.css 파일 넣기

이렇게 하면 dist 파일에 css 폴더가 들어가게 된다.

3. 터미널에 npm run dev 입력

개발 서버가 열리고 내용을 확인하면 css가 잘 적용된 것을 확인할 수 있다.

2️⃣두 번째 방법. js 에서 css 가져오기

다시 루트 경로에 css 폴더를 꺼내놓자.

1. main.js에서 import로 css 가져오기

import '../css/style.css'

webpack의 진입점을 js파일로 해놓았기 때문에 webpack은 main.js부터 읽어나가면 main.js에 연결된 css 파일도 읽을 수 있게 된다.
그럼 webpack이 css를 읽고 index.html과 섞어 다시 dist 폴더로 들어가게 된다.

2. 터미널에 npm i -D css-loader style-loader 입력

webpack이 css 파일을 읽을 수 있도록 패키지를 설치해줘야 한다.

3. webpack.config.js에 module 추가

const path = require('path')
    const HtmlPlugin = require('html-webpack-plugin')
    const CopyPlugin = require('copy-webpack-plugin')

    module.exports = {
        //파일을 읽어들이는 진입점
        entry: './js/main.js',

        //결과물(번들)을 반환하는 설정
        output: {
            // path: path.resolve(__dirname, 'dist'),
            // filename: 'main.js',
            clean: true
        },

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

        //번들링 후 결과물의 처리 방식 등 다양한 플러그인 설정
        plugins: [
            new HtmlPlugin({
                template: './index.html'
            }),
            new CopyPlugin({
                patterns: [
                    { from: 'static'}
                ]
            })
        ],

        devServer: {
            host: 'localhost'
        }
    }

추가된 module 부분을 해석해보자면 .css로 끝나는 모든 파일을 test 속성에 매칭하여 js에서 css를 해석해주는 css-loader를 사용하고 style-loader로 html의 style태그로 삽입한다는 뜻이다.
여기서 주의할 점은 위에서부터 style-loader를 먼저 입력하고 그 다음에 css-loader가 와야한다는 점이다.

4. 터미널에 npm run dev 입력

개발 서버가 열리고 내용을 확인하면 css가 잘 적용된 것을 확인할 수 있다.

➰ SCSS 연결하기

위에서 했던 두 번째 방법에서 몇 가지 수정하면 scss도 연결할 수 있다.
먼저 루트 경로에 scss 폴더와 그 안에 style.scss 파일을 넣자

1. main.js 파일을 열어 import scss 추가

import '../scss/style.scss'

2. webpack.config.js module부분에 scss도 매칭하도록 수정

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

test에서 ?는 있을 수도 없을 수도 있음을 뜻하는 정규표현식으로 따라서 scss와 css 모두 매칭할 수 있음을 나타낸다.

3. 터미널에 npm i -D sass-loader sass 입력

scss를 읽을 수 있는 패키지를 설치하는 것이다.

4. 터미널에 npm run dev 입력

개발 서버가 열리고 내용을 확인하면 scss가 잘 적용된 것을 확인할 수 있다.