In React and Typescript why are my absolute paths not working on nested folders?

I'm trying to set up absolute paths in my React project but am running into a few issues when it comes to nested folders and the use of @ prefix.

With the following settings in my tsconfig.json:

{
  "compilerOptions":{
    "baseUrl":"src",
    "paths":{
      "global/*":[
        "./global/*"
      ],
      "features/*":[
        "./features/*"
      ],
      "content/*":[
        "./features/content/*"
      ]
    }
  },
  "include":[
    "src"
  ]
}

This works: import "features/content/css/viewContent.css";

But this does not: import "content/css/viewContent.css";

I'm also having issues when using @ prefix, for example with the following settings in my tsconfig.json:

{
  "compilerOptions":{
    "baseUrl":"src",
    "paths":{
      "global/*":[
        "./global/*"
      ]
    }
  },
  "include":[
    "src"
  ]
}

This works: import "global/components/example";

But adding a @ prefix in my settings liks so:

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

Doesn't work: import "@global/components/example";

File structure for examples above is as follows:

└── root dir
    ├── src
    │   └── features
    │       ├── content
    │           └── css
    │           └── etc...
    │           └── etc...
    │           └── etc...
    │   └── global
    │       ├── components 
    │       └── etc...
    │       └── etc...
    │       └── etc...
    │  
    └── tsconfig.json

I've also followed the steps here but unfortunaley with not much luck.

Any help would be much appreciated.

Solution

This turned out to be an issue caused by using create-react-app. I managed to solve it by using craco and adding the paths to my craco.config.js (as well as having them in my tsconfig.json file)

craco.config.js

const path = require("path");

module.exports = {
  webpack: {
    alias: {    
      "@global": path.resolve(__dirname, "src/global/"),
      // etc...     
    },
  },
};

tsconfig.json

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