如何使create-react-app建立的react項目支持sass

前言

create-react-app打包一樣是用的webpack，因此使其支持sass實際上是和咱們自行初始化的項目同樣的，只是webpack的配置文件所在目錄不同。因此只要找到配置文件所在的目錄，而後按照通常webpack的配置方法配置就好。

下面是操做步驟

首先安裝sass-loader和node-sass兩個依賴。

yarn add sass-loader node-sass

而後修改node_module文件夾下react-scripts裏面關於webpack的配置文件

具體文件路徑爲： ./node_module/react-scripts/config/webpack.config.dev.js 注意：這是開發時的配置文件，打包還須要再配置webpack.config.prod.js文件

具體修改內容就是在配置文件裏面添加：

{
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
}

具體位置就是在css配置的下面

{
  test: /\.css$/,
....

以上就是使create-react-app支持sass最簡單的配置方法了。