Next.js × microCMS リッチテキストディタのスタイル反映（CSS適用）について

microCMSを使ってブログを作成している時に遭遇した問題と、その解決方法についてのつぶやき

現状の問題点

最近、microCMSを使って立ち上げたブログのリッチテキストエディタで作成した記事にスタイルが全く反映されないという問題です。

見出しを設定したり、テキストを装飾したりしても、実際のブログページではそれが全く反映されない状態でした。

実現したいこと

実現したかったのは、Notionのような形式でスタイルが装飾されること。
具体的には、「見出し1」を適用した場合、自動的に文字の大きさが変わるというものです。

解決への道のり

1. style.module.cssを導入して、対象のコンポーネントにimportすることで、スタイルを適用できるようになります。

2. Next.jsの初期状態では、次のようなエラーが表示されてしまいました

   Selector "*" is not pure (pure selectors must contain at least one local class or id)
   

3. この問題を解決するために、`npm install --save sass`を実行してSassをインストールしました。

4. 問題のあるセレクタをIDで囲むことで、エラーを解消しました。

   これらの手順を踏むことで、やっと私のブログ記事にスタイルが適用されるようになりました！

まとめ

microCMSでブログを作成する際、スタイルの適用に苦戦することがあるかもしれません。
しかし、style.module.cssの導入とSassの使用、そして適切なセレクタの設定により、この問題は解決できます。
初期状態からCSSが反映されていると嬉しい.....

※追記

当てているCSSが不完全でリッチテキストエディタ本来の力を出せていない模様
CSS設定を少しずつ見直していきます。。。。