1. 安裝node-sass

$ npm install node-sass --save
$ # or
$ yarn add node-sass

之后你就可以使用Sass了

//可以在js文件中通過import 來引用*.scss文件
import  './public.scss'
//可以在scss文件中通過@import來引用*.scss文件
@import './public.scss';

注意：這邊引用路徑的都是相對路徑。

2.使用絕對路徑來引用scss文件

在用scss的過程中，你可能想要在src目錄下創(chuàng)建一個放置公共scss文件的目錄，這個時候使用相對路徑會出現(xiàn)煩人的‘../../../../public.scss’的寫法，使用絕對路徑的方式明顯方便很多，在最新的文檔中，官方給出了一個非常簡單的操作，在src目錄下添加一個jsconfig.json文件：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

之后就可以任意使用絕對路徑的寫法了：

//可以這樣引用scss
@import 'styles/public.scss';
//甚至可以這樣來引用一個組件
import 'component/Button.js'

總而言之，寫代碼一個爽。

Note: jsconfig.json如果要生效，請將react-scripts升級至最新版本。

參考資料

1. 添加 Sass
2. 使用絕對路徑