React[Component Styling] - Style Loaders

일상 코딩·2022년 6월 2일
0

React

목록 보기
28/45

01.Style Loaders

  • style LoadersReact Component를 스타일링하는 방법중 하나 입니다.
  • webpack은 스타일시트를 처리하는 css-loaderstyle-loader라는 두 가지 로더를 제공 합니다.
  • .css 파일을 import하게되면 style-lodaercss-loader가 동작하게 됩니다.
  • create react-app안에 있는 webpack 설정이 파일 확장자에 맞는 loader에게 위임합니다.

React Component Styling 방법 여섯 가지

  • Style Loaders
  • CSS, SASS
  • CSS module, SASS module
  • Style-component
  • React Shadow
  • Ant Design

02.프로젝트 생성

$ npx create-react-app style-loaders-example
$ cd style-loaders-example
$ npm run eject
$ code .

03.webpack 설정보기

CSS

CSS Module

Sass

Sass Module

profile
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」

0개의 댓글