Docusaurusでcssが当たらない？！

Docusaurusで開発環境時においてはCSSが当たるけど、ビルド時には当たらないという問題が発生しました。 諸々調べて、ちゃんと当たるようになったので、その方法を共有します。

結論

CSSのセレクタが間違っていたみたい。 以下のようにすると当たるようになる（codeBlockTitleは適宜当たらない箇所のクラス指定を見てください）

custom.css

[class^="codeBlockTitle"]{
    padding :0.25rem var(--ifm-pre-padding)!important;
}

詳細

問題だったパターン

自分が書いたCSSは以下のような感じでした。

custom.css

.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module{
    padding :0.25rem var(--ifm-pre-padding)!important;
}

これはローカルの開発環境で、直接CSSのクラス指定を見て、上書きしてあげればいいじゃんと安直に思って書いたのがダメでした。

改善①

じゃぁ本番環境のクラスで指定してあげれば良くね？ってことで、本番環境でのクラスを見て書き換えました。

custom.css

.codeBlockTitle_Ktv7{
    padding :0.25rem var(--ifm-pre-padding)!important;
}

おぉ、ちゃんと当たるようになった！と思いきや、ローカルの開発環境でCSSが当たらない。。。

改善②

ローカルの開発環境でcssが当たらないため、さらに工夫が必要。。。 Google先生にお聞きして、最終的には最初の例に挙げた以下の通りに。

custom.css

[class^="codeBlockTitle"]{
    padding :0.25rem var(--ifm-pre-padding)!important;
}

無事に本番環境でもローカルでもCSSが当たるようにしました。

まとめ

CSSのセレクタが間違っていたのが原因で、ローカルの開発環境では当たっていたけど、ビルド時には当たらないという問題が発生しました。 恐らく、正規表現的にクラス名を指定してあげれば本番・開発のどちらのパターンでも当てれることができるので、めっちゃ便利だと思います。