Gatsby : CSS 쓰기 및 파일 분할 사양

직접 만든 CSS를 만드는 방법은 다음과 같습니다. React 특유의 쓰기 방법.

// index.js
import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

import { Container, Row, Col, Badge, Accordion, Card, Button } from 'react-bootstrap'

const h1Size = {　　　　　// 自分でつけた任意の名前
  fontSize: '1.25rem',   // font-sizeとするところfontSizeとする。React特有の書き方
  lineHeight: 1.75   // line-heightとするところlineHeight
}
const h2Size = {
  marginTop: '1.25rem',
  fontSize: '1.1rem',
  color: '#999999',
  lineHeight: 1.75
}
const fontSmallCrimson = {
  color: 'crimson',
  fontSize: 'small'
}
const fontSmall = {
  fontSize: 'small',
}
const fontCrimson = {
  color: 'crimson',
}
const fontGray = {
  color: '#777777',
}
const lineSpace = {
  marginTop: 20,
}
const IndexPage = () => (
    <h1 style={h1Size}>ギャツビー</h1>
・・・以下略・・・

파일 분할하고 싶습니다.

JS 파일이 점점 길어지기 때문에 파일 분할하고 싶다.

global.css

프로젝트 전체에 적용되는 CSS는 다음과 같은 방식으로 (bootstrap을 사용하는 경우에는 필요하지 않은 작업일지도)

우선 src/styles 폴더를 작성.

styles 폴더 아래에 global.css를 만듭니다.

global.css 에 CSS를 기술

styles/global.css ↓

h1 {
  color: FireBrick;
}

gatsby-browser.js 에 다음과 같이 기술

import "./src/styles/global.css"

이 예에서는 모든 페이지의 H1 표제를 FireBrick 색으로 하고 있다.
index.js등의 표시 컴퍼넌트에 import문은 필요 없다.

구성 요소당 CSS

index.js라면 index.module.css라는 파일을 만듭니다. 이렇게 해서 파일명을 같게 하는 것만으로, 이른바 Angular에 있어서의 컴퍼넌트 4 세트(html, css, ts, spec.ts)중의 css 파일이라고 인식된다.

거기에 예를 들면 다음과 같이 내 CSS를 기술.

/*index.module.css*/
　.h1Size  {
    font-size : 1.25rem;
    line-height : 1.75;
  }
   .h2Size   {
    margin-top : 1.25rem;
    font-size  : 1.1rem;
    color: #999999;
    line-height: 1.75;
  }
   .fontSmallCrimson  {
    color: crimson;
    font-size : small;
  }
   .fontSmall   {
    font-size:  small;
  }
   .fontCrimson   {
    color: crimson;
  }
   .fontGray   {
    color: #777777 ;
  }
  .fontRed  {
    color: red
  }
  .fontBule {
     color: steelblue;
  }
   .divLineSpace   {
    margin-top:  20;
  }

에서 JS의 HTML은 다음과 같이.

//index.js
import Styles from './index.module.css'
・・・略・・
<h1 className={Styles.h1Size}>ギャツビー</h1>
<span className={Styles.fontSmall}>Gatsby</span>
・・・略・・

import Styles~문 삽입도 필요 없게 해주면 기쁘다.

이상.

홍보

microCMS는 제외하고, Gatsby의 기본과 node API의 취급에 대해서 밟아 해설·핸즈온 한 전자 서적을 상급했으므로, 좋으면 손에 들여 보세요.

JAMStack을 배우자 Gatsby, React bootstrap, Netlify로 만드는 기업 사이트: 더 이상 렌탈 서버 필요 없음 Gatsby와 microCMS를 조합한 기업 사이트 작성 절차를 해설 핸즈온한 속편을 상처했습니다. 아무쪼록 손에 들여보세요.
JAMStack을 배우자 Gatsby와 microCMS로 만드는 기업 사이트 ~WordPress는 이미 오래된~