LoginSignup
11
3

More than 5 years have passed since last update.

create-react-app で CSS Modules を使う

Last updated at Posted at 2018-02-22

create-react-app v1.1.1 では現在、標準では CSS Modules を利用することができません。
検索したところ、ejectしろ(要約)という記事が出てきましたが、react-scripts の新しいバージョンでは導入が進められていて、テスト中ながらその機能を利用することができます。
reac-scripts を v2.0.0 アルファ版にアップデートしましょう。

新しいアプリケーションを作る場合

$ npx create-react-app@next --scripts-version=2.0.0-next.b2fd8db8

既存のアプリケーションに適用する場合

$ yarn upgrade react-scripts@2.0.0-next.b2fd8db8

アップデートを行うことで、[name].module.css という命名規則に則ったファイルのみ、CSS Modules として認識されるようになります。

react-scripts v2.0.0 はまだアルファ版のため、当然ですが以下のような注意書きがあります

  • 機能が壊れているか、期待どおりに機能しない可能性があります
  • react-scripts v1 系からの破壊的変更があるようです

参考:
- Roadmap for react-scripts@2.0
- Add support for CSS Modules with explicit filename - [name].module.css

11
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
3