続: React始めました

そういえば...

package.jsonを見ると

react-scriptsのバージョンが2以上なので、sassが使えるのでは！

node-sassのインストール

とりあえず、デバッグサーバーが起動されていたらイケないので

$ docker-compose down

終了させてからの、インストール

$ docker-compose run --rm --workdir="/src/sample" react yarn add node-sass

そして、またデバッグサーバーを動かしておく。

$ docker-compose run --service-ports --workdir="/src/sample" --detach react yarn start

いざ、確認

cssファイルをリネームしてみる。

デバッグサーバーを見てみると

ああ、importがｗ

App.js

  import React, { Component } from 'react';
  import logo from './logo.svg';
- import './App.css';
+ import './App.scss';

ちょっと、いじってみる

App.scss

+ $primary-color: #282c34;
+ $secondary-color: #61dafb;

  .App {
    text-align: center;
  }

App.scss

  .App-header {
-   background-color: #282c34;
+   background-color: $primary-color;
    min-height: 100vh;

App.scss

  .App-link {
-   color: #61dafb;
+   color: $secondary-color;
  }

ふむふむ、イケてそう。

この記事のつづきでした