まえがき

今回は、ReactにSass(scss)を導入する方法を忘却録として記録します。
これから、ReactにSassを導入した方がいれば、参考にしれください。
では、初めて行きましょう。

ReactにSass(scss)を導入する

実装には、コマンド操作を行いますので準備をしてください。
私は、VScodeを使用します。

※また、Reactをインストールした初期画面を想定して設定します。

入力コマンド

コマンド

yarn add node-sass
npm install -s node sass
yarn add node-sass

以上3点を、共に実行しても良いですし、1つづつ実行しても問題ありません。

ファイルの拡張子の変更

コマンド

create-react-app Smple-Name

での生成時にできた
index.css と App.css の拡張子を "css→scss" へ変更してください

importの修正

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.scss'; ← App.css を App.scss へ変更

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss'; ← index.scss を index.scss へ変更
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ブラウザでの確認

以下のコマンドのどちらかを実行してください。
ブラウザで、問題なく Sass が読み込まれていればエラーが起こらないと思います。

コマンド

npm start
or
yarn start

Sassの変更

先ほど、ブラウザで確認しましたが、今回はSassを修正してみましょう。
初期設定の App.css (App.scss)を以下に修正します。

src/App.scss

.App {
  text-align: center;
  &-logo{
    height: 40vmin;
  pointer-events: none;
  }
  &-header{
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  &-link{
    color: #61dafb;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

変更をしたら、ブラウザで再び確認してください。

どうでしたか？うまくいきましたか？

以上がReactにSassを導入する方法でした。

あとがき

ここまで読んでいただき、ありがとうございました。
Sassを導入すると便利に編集ができるので、準備ができてよかったです。

参考リンク

React Starters: #4 Adding Sass to Create React App
参考動画様ありがとうございました。

Myリンク

また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

Twitter
Portfolio
Github