LoginSignup
0
1

More than 3 years have passed since last update.

create-react-app(CRA)でcssやめてscssを使う方法

Last updated at Posted at 2021-01-21

Reactのプロジェクトを作成

npx create-react-app myapp --template typescript

Sassのビルドツールをインストール

npm i -D node-sass@4.14.1

node-sassのバージョン指定の理由は最新版の5.0.0をインストールすると下記のようなエラーが発生するからです

error Generating development JavaScript bundle failed 
Node Sass version 5.0.0 is incompatible with ^4.0.0.

cssファイルをscssファイルにリネーム

index.cssApp.css.scssに変更
index.tsxApp.tsxのcssをimportしている箇所をscssに変更

アプリを実行

npm start

ブラウザデフォルトのcssをリセットしたい

index.sccの最初に下記を追記すればOK(公式)

@import-normalize; /* bring in normalize.css styles */
0
1
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
0
1