React CSS & SCSS config

homewiz·2024년 4월 1일

CSS React css-loader scss style-loader

React & typescript

목록 보기

5/18

INTRO

Webpack에서 style code loader 세팅에 대하여...

config

install package

mkdir ./src/styles && touch ./src/styles/index.scss

yarn add -D style-loader css-loader

./config/webpack.common.js

...
module: {
      rules: [
        { test: /\.md$/, loader: "ignore-loader" },
        {
          test: /\.(tsx)?$/,
          // use: ["babel-loader", "ts-loader"], 바벨은 생략 하자
          use: ["ts-loader"],
          exclude: /node_modules/
        },
        // 추가
        {
          test: /\.(css|scss)$/i,
          use: ["style-loader", "css-loader"]
        }
      ]
    },
...

Style

./public/index.html body태그 안에 랜더링용 div tag id root의 속성을 정의 해본다.

...
<body>
  <div id="root"></div>
</body>
...

@/styles/index.scss

#root {
  color: red;

  .comp-div {
    color: blue;
  }
}

@/index.tsx

...
import "@/styles/index.scss" // 추가
...

@/components/ImplictComponent

div에 className을 추가 해준다.

import React from "react";

type TProps = {
  text?: string;
};
const ImplictComponent: React.FC<TProps> = ({ text = "explict" }) => {
  return <div className="comp-div">Component: {text}</div>;
};

export default ImplictComponent;

@/components/ExplictComponent

div에 className을 추가 해준다.

import React from "react";

type TProps = {
  text?: string;
};
const ExplictComponent: React.FC<TProps> = ({ text = "explict" }) => {
  return <div className="comp-div">Component: {text}</div>;
};

export default ExplictComponent;