I can't import a scss file using tsconfig paths in Remix

Question

The problem I have is this, when I import a scss file into another scss using tsconfig paths an error occurs. Remix reports that the stylesheet cannot be found. Below is my source code

style:

@import '@/styles/variable.scss';
.header{
 width: 100%;
 height: 56px;
 background-color: $color_black_space_800;
}

tsconfig

 {
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
  "lib": ["DOM", "DOM.Iterable", "ES2022"],
  "isolatedModules": true,
  "esModuleInterop": true,
  "jsx": "react-jsx",
  "moduleResolution": "Bundler",
  "resolveJsonModule": true,
  "target": "ES2022",
  "strict": true,
  "allowJs": true,
  "forceConsistentCasingInFileNames": true,
  "baseUrl": ".",
  "paths": {
   "@/*": ["./app/*"]
   },

  // Remix takes care of building everything in `remix build`.
  "noEmit": true
  }
}

I want to can import using @ paths