Help us understand the problem. What is going on with this article?

create-react-appとCSS

More than 1 year has passed since last update.

はじめに

いまの時代、Reactで開発環境を作るならCSSを直接書いていく人は少なくSASSLESScss modulesstyled-componentsなどを使うと思います。

Reactはフルスタックフレームワークでは無いので開発環境を作るのが他に比べ大変です、そこでFacebookがモダンな開発環境キットとしてcreate-react-appを公開しています。

ただ、このcreate-react-app初期状態ではCSSだけに対応しています。
そこで現状、どういう選択肢があるかの個人的な覚書です。

注意: Ejectはしない
Ejectすれば隠されている複雑な設定ファイルを自分で変更する事ができますが、あとあと面倒になるのでEjectしないで何ができるかです。

SASS or LESS

Adding a CSS Preprocessor (Sass, Less etc.) 公式に説明ありますのでその通りに導入すればEjectせずに使用可能です。

css modules

create-react-app v2.x からcss modulesが対応します。
Githubのprojectに進捗がありますが正式リリースはもう少し時間かかりそうです。

create-react-app で CSS Modules を使う
現状ではアルファ版として一応使えます。

styled-components

CSSを別で処理するわけではないのでcreate-react-app関係なく使用可能です。

以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした