본문 바로가기

WEB

[React 공부] React에서 scss 쓰기

React로 웹사이트를 개발하다가 이제 웹디자인 후 css를 만져야하는데

scss를 어떻게 사용할 지 몰라서 찾아보았다.

 

React에서 scss 사용

일단 맨 처음에는 css에 아무것도 없고,

저 사이트는 '노마드코더'를 따라하며 만든 사이트이다.

 

웹서핑도 해보고 블로그도 들어가보고 공식 사이트에 나와있는 방법도 봤는데,

결론은 공식 사이트 짱짱맨!!

 

https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

공식 사이트에 나와있는대로 한번 해보자!


react 2.0.0 버전 이후로 지원가능하다.

 



 

npm install node-sass --save

 

작업을 잠시 중단한 후, 위의 코드를 입력해준다.


설치후

취약점이 69개나 발견되었다길래 하라는대로 해봤다.

npm audit fix

위의 코드를 입력해준다.

 

yarn add node-sass

 

마지막으로 위의 코드를 입력해준다.

 


css 폴더를 scss로 바꿔주고

 

App.js 스크립트에서

import한 스크립트파일의 이름도 바꾸어준다.

 

.App { h1{ color:red; } }

.App { 
  h1
  { color:red; } 
}

간단하지만 확실히 바뀔 수 있는 코드를 적고

 

yarn start

성공적!

(캡처에 있는 오류는 js 상 오류라 무시해주세요..)


그 외에도

https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6

React에 SCSS 적용및 기본 사용법(1)

React, 혹은 다양한 Framework로 프로젝트를 진행하다보면 Front-End개발자는 css작업을 하게 된다. css는 추가적인 플러그인을 설치할 필요 없이 사용할 수 있고, 사용 환경에 영향을 받지 않기 때문에 많은 사람이 css을…

 

 

https://liante0904.tistory.com/176

[React] yarn eject 실패시

리액트 그리고 js 풀스택 개발에 관심이 있다면 한번 쯤은 들어봤을 velopert님이 집필한 '리액트를 다루는 기술' 책을 최근 구입했다. 그리고 연휴를 이용해 빠르게 훑어가던 중 진행이 안되는 부분이 있어서 포..

 

 

이런 사이트들을 참조했는데,

하다가 막히면 한번 따라해보시길..!

나는 저 방법들 먼저 써봤다가 안대서 공식사이트를 참조했는데,

공식사이트 방법만으로도 실행되어서 그냥 한다.

아디오스-!

'WEB' 카테고리의 다른 글

[React 공부] React에서 scss 쓰기  (0) 2019.05.12
[React 정리] 우리는 React를 왜 배우는가?  (0) 2019.05.05
LAMP 설치  (0) 2019.03.01
PHP: JSON으로 외부 url 데이터 따오기  (0) 2019.02.22