webpack으로 scss 쓰기

먼저 client 폴더 안에 scss폴더를 만들고 styles.scss를 만들어준다. 여기에 아무코드나 입력해준다. 아직 까지는 웹팩이 scss를 구형의 css파일로 변환해주는 능력이 없다. 따라서 webpack.config.js 파일을 다음과 같이 수정해준다.

const path = require("path");

module.exports = {
    entry: "./src/client/js/main.js",
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "assets", "js"),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [["@babel/preset-env", { targets: "defaults" }]],
                    },
                },
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ],
    },
};

rules에 scss관련 코드가 추가된 것을 볼 수 있다. 이는 scss형식의 파일을 받아들여서 css로 변환한다는 것이다. 이때 use에 여러가지가 있는데, 이는 각각 npm install을 통해서 다운로드 받은것이고 scss -> css로 하기 위해 필요한 것들이다. 웹팩이 하는일은 다음과 같다.

웹팩은 엔트리 파일을 읽고 가져온다. 웹팩은 이 파일이 js 파일인것을 알기 때문에 babel을 통해서 변환을 진행한다. 이 js 파일에 import를 통해 scss가 있는것을 보고 scss파일을 css파일로 변환한다. 그리고 이 변환한 내용을 적용한다. 특히 변환된 css파일은 웹페이지에가서 inspect(검사) 해보면, head 태그에 들어가 있음을 알 수 있다.

 

+++ 

sass-loader : scss를 일반적인 css로 바꾸어주는 역할을 한다.

style-loader : css 코드를 브라우저에 적용하는 역할을 한다.