Absolute paths using baseUrl in CRA-based project won't get resolved correctly

[ChristianIvicevic]

Describe the bug
I am writing a CRA-based application and just turned on "baseUrl": "src" in the corresponding tsconfig.json file. Hence I am importing styles as import Styles from "components/App/App.module.scss"; instead of import Styles from "./App.module.scss"; for example. This causes the plugin to not do anything and not suggest any class names since it cannot resolve the file apparently due to the unexpected nature of the absolute paths.

To Reproduce
Steps to reproduce the behavior:

1. Create a fresh CRA 3.0+ application.
2. Add "baseUrl": "src" to the compilerOptions of tsconfig.json.
3. Install node-sass.
4. Rename the file App.css to App.module.scss.
5. Import as import Styles from "App.module.scss";.
6. Notice how you get no code completion since the plugin isn't able to pick up the file.

Expected behavior
No squigglies when attempting to access Styles["App"] or Styles["App-header"] and proper dynamic typing of Styles.

[mrmckeb]

Hey @ChristianIvicevic, this should work as tsconfig.json is how TypeScript knows where to find the files... but there may be something else going on here.

Also, you shouldn't need to install node-sass, CRA will compile Sass for you in newer versions :)

Are you able to share your test repository? Otherwise I can take a look over the weekend.

[ChristianIvicevic]

The documentation still explicitly states to install node-sass when using CSS modules with SCSS files. Never really heard it not being necessary.

Anyways, I just upped a very simple repo for you to check what's going on: https://github.com/ChristianIvicevic/css-modules-mwe

[mrmckeb]

Sorry @ChristianIvicevic, you're correct - I never faced the issue as I always had Storybook installed.

Thanks for your time helping to resolve this, it turned out to be a little trickier than expected... so do let me know if this does or doesn't solve your issue. I'll close this ticket when we're ready to release.

[ChristianIvicevic]

@mrmckeb I'll test this later this evening or tomorrow and report on whether this fix has resolved the issue. Thanks for looking into it!

[babakness]

I'm still having this issue.

// foobar.module.scss
@import 'src/sass-helpers/functions'

import styles from './foobar.module.scss' 

Does not raise a TS error the type of styles is given by {}. Using relative path affords the correct types. Using paths within baseUrl

@import '../../sass-helpers/functions'

[mrmckeb]

For anyone that comes across this issue, you need to set this up in the plugin's settings. Example here: #113 (comment).