如何使 React 支援 Sass ? | 點燈坊

Sass 是很著名的 CSS Pre-processor，create-react-app 並沒有直接支援，須自自行安裝 Package。

Version

macOS Mojave 10.14.6
WebStorm 2019.2.3
Node 12.11.0
Yarn 1.19.0
create-react-app 3.1.2
React 16.10.1

Create-react-app

$ yarn create react-app react-sass

Node-sass

使用 yarn create react-app 建立 project。

$ yarn add node-sass

使用 Yarn 新增 node-sass package。

Sass

App.scss

$color: #282c34;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: $color;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

將原本的 App.css 改成 App.scss。

第 1 行

$color: #282c34;

定義 $color variable。

12 行

background-color: $color;

使用 $color variable。

App.js

import React from 'react';
import logo from './logo.svg';
import './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;

第 3 行

import './App.scss';

從原本的 import ./App.css 改成 App.scss。

Conclusion

• 目前 create-react-app 還不支援 dart-sass，只能使用 node-sass

Reference

Hemil Patel, Setting up SASS