Gatsby + WordPress にscssを導入

タイトル通りだが、WordPressを管理画面としたGatsbyプロジェクトに導入した際の備忘録。プロジェクト作成時にscssを入れていなかったので、既存の（割と）プレーンなプロジェクトに追加する流れ。

環境

• MacOS
• node -v
  `v20.10.0`
• Gatsby version: 5.3.3

大まかな流れ

1. npm install
2. gatsby-config.ts追記
3. 既存cssの解消
4. scssの検証

1. npm install

何はなくとも公式を参照せよ

https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/

npm install sass gatsby-plugin-sass

2. gatsby-config.ts追記

gatsby-config.tsのpulugins:[]内に追記

    {
      resolve: `gatsby-plugin-sass`,
      options: {
        sassOptions: {
          includePaths: ['src/styles/scss'],
        },
      },
    },

3. 既存cssの解消

src直下のstylesはこんな風にしたい

./src
│   略
├── styles
│   ├── css
│   │   ├── @wordpress
│   │   │   └── 略
│   │   ├── global.css
│   │   ├── normalize.css
│   │   └── style.css
│   └── scss
│       ├── _base.scss
│       ├── _error.scss
│       ├── _mixin.scss
│       ├── _variables.scss
│       └── style.scss
└── 略

ベースのstyle.scssはとりあえずこんな感じ

@charset "UTF-8";

// variables
@import 'variables';

// mixin
@import 'mixin';

// default styles
@import 'base';
// @import 'slick';

// 404
@import 'error';

そのため、まずstylesディレクトリを作成し、その中にcss、scss（新規作成）ディレクトリを突っ込む。scssは完全新規なので問題ないがcssはディレクトリ構造が変わるので諸々変えなければいけない。変えたのは、以下の2ファイルのみ（だったと思う）。いずれも../css/記載部分を../styles/css/に変えるだけ。

• gatsby-browser.tsx
• blog-post.tsx

gatsby cleanした後にgatsby developし、エラーが出たら都度直せばヨシ。

4. scssの検証

試しにblog-post-archive.txtで、style.scssが適用されるか見てみる。

// blog-post-archive.txt
  return (
    <Layout isHomePage>
      <Seo title="All posts" />

      <Bio />
      <p className="ham">ham</p>

      <ol style={{ listStyle: `none` }}>

適用前

// style.scss
.ham {
  color: red;
}

// blog-post-archive.txt
import '../styles/scss/style.scss'

適用された✌️