【craco】create-react-appでsassの変数やらmixinやらをグローバルに定義する方法

React Nativeに続いて、久々にバニラなReactを触りました。

以前はwebpackでチコチコ環境構築していたのですが、最近そういうのだるくなってきたのでcreate-react-appでいいかなと思いまして。

「create-react-app」はreactを即動かせるテンプレートプロジェクトを作成することができるコマンドです。

詳しくは下記の記事など。
qiita.com

で、すぐ作成できるのはいいのですがデフォルトだと色々よしなにやってくれすぎていて、カスタマイズがちょっとだるいんですよね。（ejectとかやんないといけないんです）

さらに言えば、「webpackどうせいじるならwebpackで最初からやったらええやん...」という。

ejectしたらどうなるか的なのは下記の記事など。
qiita.com

で、表題の件に辿り着いたわけですね。

とりあえず、create-react-appをデフォルトにwebpackなどの設定をオーバーライドできるパッケージがあるようで、その名も「craco」と言います。

僕が見つけたのは表題の件を調査していた時で、DEV Communityにて下記の投稿が発端です。

dev.to

パッケージ情報は下記です。

www.npmjs.com

週間で20万DLなのでかなり使われてますよね。

で、とりあえずインストールしてみて、DEV Communityの記載通り「craco-sass-resources-loader」を使用して下記のように設定しました。

const sassResourcesLoader = require('craco-sass-resources-loader');

module.exports = {
    mode: "development",
    output: {
        path: __dirname
    },
    plugins: [
        {
            plugin: sassResourcesLoader,
            options: {
                resources: './src/css/style.scss',
            },
        },
    ]
};

style.scssには下記のような感じで各種変数定義や関数をインポートしてます。

@import "reset";
@import "variables";
@import "functions";
@import "common";

これで、style.scssがグローバルに定義され、どこからでもアクセスすることができるようになりました。
もちろんモジュール化したscss内でも使用することができます。

.artists {
  @include flex(column, center, center);

  & > a {
    > p {
      color: $black;
    }
  }
}

てきな。

個人的にはある程度までcreate-react-appでやってもらって、そのあとはcracoでカスタマイズしていく方針が自分に合っていると感じました。

もちろん、「モジュール化せずに全てstyle.scssでインポートするぜ！」とかの場合は上記の工程必要ないのですが、せっかくReact使うんだからcss modulesとか使いたいですよね。余計な記述なくなりますし。

あとcssファイルを.scssとか、.module.scssとかにリネームするだけでよしなに処理してくれるようになった点はめっちゃ感動しました。

以上です。