react-create-app scss脚手架

package.json

{
	"name": "demo",
	"version": "0.1.0",
	"private": true,
	"homepage": ".",
	"dependencies": {
		"@testing-library/jest-dom": "^5.16.1",
		"@testing-library/react": "^12.1.2",
		"@testing-library/user-event": "^13.5.0",
		"@types/jest": "^27.0.3",
		"@types/node": "^16.11.17",
		"@types/react": "^17.0.38",
		"@types/react-dom": "^17.0.11",
		"antd": "^4.18.2",
		"classnames": "^2.3.1",
		"history": "^5.2.0",
		"node-sass": "^7.0.0",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-router-dom": "^6.2.1",
		"react-scripts": "5.0.0",
		"typescript": "^4.5.4",
		"web-vitals": "^2.1.2"
	},
	"scripts": {
		"start": "react-app-rewired start",
		"build": "react-app-rewired build",
		"test": "react-app-rewired test --env=jsdom",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": [
			"react-app",
			"react-app/jest"
		]
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"devDependencies": {
		"@types/react-router-dom": "^5.3.2",
		"react-app-rewired": "^2.1.9"
	}
}

使用react-app-rewired设置别名

config-overrides.js

const path = require('path')
const srcPath = path.resolve(__dirname, '../src')

/* config-overrides.js */
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    // alias
    config.resolve.alias = {
        ...config.resolve.alias,
        config: `${srcPath}/config`,
        components: `${srcPath}/components`,
        containers: `${srcPath}/containers`,
        images: `${srcPath}/images`,
        '@components': `${srcPath}/components`,
    };
    config.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx']
    return config;
}