新增 Sass 樣式表

注意：此功能需要 react-scripts@2.0.0 以上版本。

一般而言，我們建議不要在不同元件間重複使用相同的 CSS 類別。例如，不要在 <AcceptButton> 和 <RejectButton> 元件中使用 .Button CSS 類別，建議建立一個 <Button> 元件，具有自己的 .Button 樣式，供 <AcceptButton> 和 <RejectButton> 渲染（但 不繼承）。

遵循這個規則通常會降低 CSS 預處理器的效用，因為 mixin 和巢狀等功能早已被元件組合取代。然而，如果您覺得有價值，也可以整合 CSS 預處理器。

如要使用 Sass，首先安裝 sass

$ npm install sass
# or
$ yarn add sass

現在您可以將 src/App.css 重新命名為 src/App.scss，並更新 src/App.js 以匯入 src/App.scss。如果匯入時具有 .scss 或 .sass 副檔名，這個檔案和任何其他檔案都會自動編譯。

如要讓 Sass 檔案之間共享變數，可以將 Sass 的 @use 規則 用於元件樣式檔案包含變數定義的 src/App.scss 和其他元件樣式檔案。

這樣就可以進行下列匯入操作

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

注意：您可以使用上面顯示的 ~ 字首路徑，以從 node_modules 解析模組。

Sass 也支援 SASS_PATH 變數。

若要使用您指定的路徑的相對匯入，您可以在專案根目錄新增一個 .env 檔案，並於 SASS_PATH 環境變數中指定路徑。若要指定更多目錄，您可以在 SASS_PATH 中新增目錄，並以 : 分隔，例如 path1:path2:path3。

注意：對於 Windows 作業系統，請使用分號分隔您的路徑。

SASS_PATH=path1;path2;path3

提示：您還可以選擇將此功能用於 CSS 模組！

注意：如果您正在使用 Flow，請覆寫 .flowconfig 中的 module.file_ext 設定，如此一來便能辨識 .sass 或 .scss 檔案。您還需要包含 .js、.jsx、.mjs 和 .json 檔案的 module.file_ext 預設設定。

[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.mjs
module.file_ext=.json
module.file_ext=.sass
module.file_ext=.scss

注意：包括 Node Sass 在內架構於 LibSass 上的套件已 停用。如果您是 Node Sass 的使用者，您可以將 package.json 檔案中的 node-sass 取代為 sass，或是執行以下指令來移轉到 Dart Sass：

$ npm uninstall node-sass
$ npm install sass
# or
$ yarn remove node-sass
$ yarn add sass