[Gatsby] CSS와 플러그인(ft. sass) 설치 & 적용방법

개츠비 설치와 프로젝트 생성을 안했다면

-> [Gatsby] 개츠비 설치 & 기본 프로젝트 만들기

 

CSS 적용방법

1. src폴더 안에 styles(이름은 마음대로)폴더 만들기

 

 

2. styles폴더안에 index.css 폴더 만들기

 

 

3. layout.js(원하는 곳)에 index.css 불러오기(import)

레이아웃을 관리하기 좋게 만든 layout.js 사용방법은

-> [Gatsby] 개츠비 페이지 레이아웃 만들기

 

 

이렇게 하면 기본적인 CSS가 연결됐다.

원하는 스타일을 리액트에 주면된다.

 

 

플러그인 설치하는 방법

1. 원하는 플러그인을 찾아보자

개츠비 공식홈페이지에서 수많은 플러그인을 찾아볼 수 있다.

여기서는 Scss를 사용할 수 있게 만드는 gatsby-plugin-sass를 설치하는 방법을 알아봅니다.

개츠비 플러그인 페이지-> www.gatsbyjs.com/plugins/gatsby-plugin-sass/?=sass\

 

 

2. gatsby-plugin-sass 설치하기

gatsby-plugin-sass : 개츠비 사이트에서 우리가 사용할 수 있게 해주고,

node-sass : 파일을 일반 CSS로 변환시켜주는 역할을 해준다고 한다.

 

 

3. gatsby-config.js가 없으면 만들어준다

 

 

4. gatsby-plugin-sass 플러그인 추가

기본적인 폼이 갖추어져 있어서 설치한 플러그인 이름만 적어주었다.

 

 

5. index.css 이름바꾸기 index.scss로

우선 styles 폴더 속 파일과 layout.js에 import한 이름을 바꿔준다.

 

 

 

정리하며

css를 사용할 사람은 CSS적용방법을 참고하고,

Scss 문법이 필요한 사람은 플러그인을 다운받아서 하면된다.

 

끝!