styled-componentsへの対応

[qrac]

MUSUBiiのSCSS変数やMixinを、React案件でもっと手軽に使いたい。

NuxtやGridsomeなどのVueフレームワークはSFCでSCSSが使え、尚且つ全ファイルに sass-resources-loader を使って変数やMixinを渡せる。コンポーネント思考に合った開発スタイルで体験がとても良い。

NextやGatsbyなどのReactフレームワークで同じ使い方ををするなら、styled-componentsを使うのが近しい。CSS modulesのようにファイルが分離するのは、SCSSを別の場所で書くのと同じような感覚だったから。

• styled-components

問題は、SCSS変数をそのまま渡せないこと。JS用にexportを書くか、案件側でSCSSをJSに変換するか、何かしら手軽にimportできる方法を考える。

Tailwindの設計も参考にする。

• Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs

React側で変換して読み込む方法が最適であれば、改修せずにドキュメント整備を。SCSS側に用意が必要であれば改修してドキュメント整備を行う。

[qrac]

ドキュメントサイトに使っているライブラリ。静的にJSON出力はなされている。変数だけであれば、このJSONを用いることもできる。

• plentycode/sass-export

[qrac]

JS用に動的にloaderを介して変数読み込みする方法。

• jgranstrom/sass-extract
• jgranstrom/sass-extract-loader

[qrac]

styled-components側で作っているSass関数っぽい物。SCSSとは使い心地が若干異なる。

• styled-components/polished

[qrac]

しばらくReact案件がメインでなくなってるのと、styled-componentsの使いづらさを認識しているので開発は一旦保留。

• styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita