분류 Reactjs

React강좌 - 17 - React App 애플리케이션을 만들기 위해 Sass 추가하기

컨텐츠 정보

  • 조회 282 (작성일 )

본문

Sass 추가 기능은 대부분의 개발자가 응용 프로그램을 시작할 때 가장 먼저 하는 일 중 하나입니다. 평범한 CSS로 쓰기는 가능하지만 Sass는 다음과 같은 기능으로 훨씬 더 많은 기능을 제공합니다.

  • 변수
  • 중첩
  • 계산
  • 믹스인
  • 함수
  • Imports
  • ....

한 줄을 사용하여 React App를 만드는 Sass 추가 : yarn add node-sass 


Sass 추가 단계 


Sass를 React Create App에 추가하는 단계는 다음과 같습니다.

  1. 노드 -sass 설치 : yarn add node-sass
  2. .css.scss로 변환하십시오.
  3. App.js와 같은 React 구성 요소에서 .scss 파일 가져 오기

node-sass 설치 


여기에는 더 깊은 다이빙이 있습니다. React App 작성 응용 프로그램에 Sass를 추가하려면 다음과 같은 단일 명령이 필요합니다.


# using npm
npm install node-sass --save

# using yarn
yarn add node-sass

.css의 이름을 .scss로 변경 


일단 그렇게 하면 App.css의 이름을 App.scss로 바꿀 수 있습니다.


wy77ugr6iysy1av9yt5i.png 


.scss 파일 가져 오기 


App.js 파일에서 .scss 확장명을 사용하여 Sass 파일을 가져올 수 있습니다.


import './App.scss';

결론


React Create App을 사용하면 빠른 명령으로 확장 할 수 있습니다!