typescript+react+emotion環境でpath aliasを設定する

create-react-app、typescript、emotionを使用してreactプロジェクトを開始
reactおよびtypescriptはnpx create-react-app 폴더명 --template typescriptを使用してインストールされます.
基本的な感情、babel、eslint、prettyer設定は上のページで見て、学んで設定します.

問題が発生

import { MainPage } from '../../../../Pages'

そうではありませんが、ファイルパスが長くなるという問題があります...
その後path aliasを知り、あちこちで設定を探しました.tsconfig.jsonをセットすればいいというのでセットして回ってみましたが….

天はあまりにも無心だ.
私らしくなく、シャベルなしで成功するとは予想していませんでしたが、悲しいです.停止エラー...
このままではどうしよう.jsonでパスを設定してもパスが見つからないという問題があります...

解決する

Creating path aliases in create-react-app with react-app-rewired
2時間シャベルして、上のページがわかりました…!

	// tsconfig.json 

    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }

// config-overrides.js
const {
  useBabelRc,
  removeModuleScopePlugin,
  override,
  addWebpackAlias,
} = require('customize-cra')
const path = require('path')

module.exports = override(
  useBabelRc(),
  removeModuleScopePlugin(),
  addWebpackAlias({ '@': path.resolve(__dirname, 'src') }),
)

config-overrides.jsファイルでWebpackAliasを設定すると綺麗になります...美しく!短縮して使えます.⏤config-overrides.jsファイルをWebパッケージに上書きする