sass modules aliased paths not working when deploying on digitalocean

Viewed 26

I have a project I am attempting to deploy on DigitalOcean (I'm unsure if the platform matters, but I thought it may be worth mentioning just in case).

In this project, I am making use of aliased paths specified in tsconfig.json:

"baseUrl": "src",
"paths": {
    "@Components/*": ["App/Components/*"],
    "@Functions/*": ["App/Functions/*"],
    "@Types/*": ["App/Types/*"],
    "@Styles/*": ["Imports/Styles/*"]
}

When building the project locally, everything works completely fine (even for the SASS imports). However, when building on a deployed server (such as a DigitalOcean App Platform), I will receive the error:

info  - Creating an optimized production build...
Failed to compile.

./src/App/Components/Module/Footer.tsx
Module not found: Can't resolve '@Styles/Module/Footer.module.scss' in '/workspace/src/App/Components/Module'

Import trace for requested module:
./src/pages/_app.tsx

This is my file structure (for Footer.tsx):

node_modules
...
tsconfig.json
src
 |-- App
 | |-- Components
 |   |-- Module
 |     |-- Footer.tsx
 |-- Imports
 | |-- Styles
 |   |-- Module
 |     |-- Footer.module.scss

This happens for multiple files and only when importing using the alias @Styles/* (@Components/*, @Functions/*, @Types/* are all fine).

Is there some sort of extra configuration I need to do for stylesheets and aliased imports?

Before you ask, YES I have triple-checked that the file structure and imports are correct.

/* src/App/Components/Module/Footer.tsx */
import styles from "@Styles/Module/Footer.module.scss";
0 Answers
Related