Gatsb：CSSファイルの置き場所とインポート（gatsby-browser.js）
自分で作成したCSSの作り方は以下の通り。React特有の書き方…。
// index.jsimportReactfrom"react"import{Link}from"gatsby"importLayoutfrom"../components/layout"importImagefrom"../components/image"importSEOfrom"../components/seo"import{Container,Row,Col,Badge,Accordion,Card,Button}from'react-bootstrap'consth1Size={ // 自分でつけた任意の名前fontSize:'1.25rem',// font-sizeとするところfontSizeとする。React特有の書き方lineHeight:1.75// line-heightとするところlineHeight}consth2Size={marginTop:'1.25rem',fontSize:'1.1rem',color:'#999999',lineHeight:1.75}constfontSmallCrimson={color:'crimson',fontSize:'small'}constfontSmall={fontSize:'small',}constfontCrimson={color:'crimson',}constfontGray={color:'#777777',}constlineSpace={marginTop:20,}constIndexPage=()=>(<Layout><SEOtitle="ギャツビー"/><Containerfluid="md"><h1style={h1Size}>ギャツビー</h1>・・・以下略・・・
ファイル分割したい
デフォルトで存在するcomponents/layout.cssをいじってもいいのだが…別のファイルに自作CSSを分けたいと思った。
- まずsrc/stylesフォルダを作成。
- stylesフォルダの下に
global.cssを作成。 global.cssに分けたいCSSを記述
styles/global.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;}divLineSpace{margin-top:20;}gatsby-browser.jsに以下のように記述
import"./src/styles/global.css"以上。
index.jsなどの表示コンポーネントにimport文はいらない。