使用 Sass 為 React 編寫樣式
什麼是 Sass
Sass 是一個 CSS 預處理器。
Sass 檔案在伺服器上執行，然後將 CSS 傳送到瀏覽器。
您可以在我們的 Sass 教程 中瞭解更多關於 Sass 的資訊。
我可以使用 Sass 嗎？
如果您在專案中使用了 create-react-app，您可以輕鬆地在 React 專案中安裝和使用 Sass。
透過在終端中執行此命令來安裝 Sass
npm i sass
現在您就可以在專案中包含 Sass 檔案了！
建立 Sass 檔案
建立 Sass 檔案的方式與建立 CSS 檔案相同，但 Sass 檔案的副檔名為 .scss
在 Sass 檔案中，您可以使用變數和其他 Sass 函式
示例
my-sass.scss
建立一個變數來定義文字的顏色
$myColor: red;
h1 {
color: $myColor;
}像匯入 CSS 檔案一樣匯入 Sass 檔案
示例
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
