styled-jsxでSCSS書きたい時は@styled-jsx/plugin-sassを導入

  • Sass
  • NextJS

しばらく放置していて埃をかぶっていたNext.jsのプロジェクト(個人用で開発していたもの)があったので、利用しているパッケージをアップデートしていました。

そこで以前記事で取り上げたDart Sassへ利用を切り替える作業をしていました。

記事: Nuxt.jsプロジェクトでLibSassからDart Sassへ利用を切り替える

普段SCSSでスタイルを実装することがほとんどなので、styled-jsxでも使えるようにしたいということでstyled-jsx-lugin-sassを導入していました。

ひとまずまずは入れ替えてみようということで、次のようにコマンドを実行しました。

npm uninstall node-sass
npm install --save-dev sass

動くかなぁと期待を込めてビルドしてみましたがstyled-jsx-lugin-sassが機能せず。

調べると後続のstyled-jsx-plugin-sass-2(@styled-jsx/plugin-sass)があり、こちらはメンテナンスもされていてDart Sassにも対応していたので、こちらを導入しました。

npm uninstall styled-jsx-plugin-sass
npm install --save-dev @styled-jsx/plugin-sass

あとは、リポジトリにあるREADMEにあるように.babelrcを更新すれば良いです。

基本的にプラグイン名を改めるだけだと思います。

次に示すのはあくまで例です。もし、sassOptionsが入っている方の場合は、その部分はそのままで良いと思います。

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["@styled-jsx/plugin-sass"]
        }
      }
    ]
  ]
}

以上、簡単な共有でした。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚