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'

適用された✌️

Author: Noreen

どうも、こんにちは。 国外をフラフラフラフラしながら仕事をしていましたが、コロナもあり自粛中です。現在は米カリフォルニアベイエリアでカロリー摂取の日々。 ブログではどこかの誰かの役に立つかもしれない情報を気ままに更新しています。