CRA18 使用craco｜配置scss，自动支持css-module ｜配置路径别名

1. 安装相关依赖：

yarn add @craco/craco sass sass-loader

npm install craco-css-modules

package.json相关代码：

  "devDependencies": {
    "@craco/craco": "^7.1.0",
    "craco-css-modules": "^1.0.5",
    "sass": "^1.62.0"
  }

2. 配置文件：

根目录创建文件：craco.config.js

const path = require('path')
const CracoCSSModules = require('craco-css-modules');

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 ~ 表示 src 文件所在路径
      '~': path.resolve(__dirname, 'src')
    }
  },
  plugins: [ 
    { plugin: CracoCSSModules },
  ]
}

3. 修改package.json文件：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4. 一些为什么？

为什么使用craco？

不用yarn eject，这个行为不可逆。

为什么要自动使用css modules？

可以通过 import styles from './index.scss' 的方式引入，且不需要命名为index.module.scss。

参考：让 create-react-app 支持自动使用 CSS Modules - 掘金