Plugin fails when using an webpack aliases and TS paths to @import other scss files inside scss modules

Describe the bug The plugin does not work when the seem to work with webpack aliases and TS paths.

Relative paths work fine, namely if I convert from alias/my-styles.scss to ../../styles/my-styles.scss the plugin works fine.

I have looked at the #26 #54 which looked like they were supposed to solve my problem, but they don’t, unless I am doing something wrong.

Below is my config. Note that ./client is the folder where I have all my client-side source code for this particular project.

// tsconfig.json
...
"baseUrl": ".",
"paths": {
  "@client/*": ["client/*"]
}
...

// webpack.config.js
...
alias: {
  '@client': path.resolve(__dirname, 'client'),
},
...

// FormComponent.tsx
import { Button } from '@client/components/Button';
import styles from './FormComponent.module.scss';
...
<div className={styles.form} {...otherProps}>...</div>
...

// FormComponent.module.scss
@import '@client/styles/variables.scss';
...
.form {
  font-size: $font-size;
}
...

// variables.scss
$font-size: 14px;
...

Because I used the @client alias to import inside the SCSS file, now the className={styles.form} show a squiggly line under the word form and I get this error: Property 'form' does not exist on type '{}'.ts(2339). If I use the relative import instead (@import '../../styles/variables.scss';) the plugin works fine.

Webpack bundles everything properly and no complaints from VS Code and TypeScript for using the @client alias when importing in either TS/TSX files or SCSS files. The only thing that does not work with the alias is this plugin, typescript-plugin-css-modules.

---

To Reproduce I can set up a test repo if the description of the problem does not provide enough info.

---

Expected behavior I expect the plugin to work with imports that use aliases just like it works when using imports with relative paths.

---

Desktop (please complete the following information):

• OS: Windows 10 Pro 64-bit, version 1809, build 17763.1039
• Code Editor: VS Code 1.42.1 (user setup)
• css-loader@3.4.2
• sass@1.26.2
• sass-loader@8.0.2
• typescript@3.7.4
• typescript-plugin-css-modules@2.2.0
• webpack@4.41.5
• webpack-cli@3.3.10
• webpack-dev-server@3.10.3

---

Additional context

Looking at the TS server log in VS Code, the plugin fails with:

Info 84   [17:47:0.941] [typescript-plugin-css-modules] Failed Error: Can't find stylesheet to import.
  ╷
1 │ @import '@client/styles/variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
Info 85   [17:47:0.954] [typescript-plugin-css-modules] Stack trace: Error: Can't find stylesheet to import.
  ╷
1 │ @import '@client/styles/variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
    at Object._newRenderError (...\node_modules\sass\sass.dart.js:13621:19)
    at Object._wrapException (...\node_modules\sass\sass.dart.js:13467:16)
    at StaticClosure._renderSync (...\node_modules\sass\sass.dart.js:13442:18)
    at Object.Primitives_applyFunction (...\node_modules\sass\sass.dart.js:1064:30)
    at Object.Function_apply (...\node_modules\sass\sass.dart.js:4898:16)
    at _callDartFunctionFast (...\node_modules\sass\sass.dart.js:6580:16)
    at Object.renderSync (...\node_modules\sass\sass.dart.js:6558:18)
    at Object.exports.getClasses (...\node_modules\typescript-plugin-css-modules\lib\helpers\getClasses.js:75:18)
    at ...

Any help would be appreciated. Meanwhile, I will try to troubleshoot the plugin as much as I can. Is there a way to execute node --inspect on the plugin to debug it?

[mrmckeb]

Thanks @mfpopa, it’s hard to get this right as everyone has the ability to completely customise this behaviour. This is why we’re trying to lean on configuration over “defaults”.

If you ever get some time and want to raise a PR, we’d welcome that.

[mfpopa]

Just wanted to note that I found out what the issue was. It looks like the plugin does not care about the paths defined in tsconfig.json when importing an SCSS module into another SCSS module.

// tsconfig.json
...
"baseUrl": ".",
"paths": {
  "src/*": ["my-source-code-folder/*"] // assume that I have a folder named "my-source-code-folder" in the root that I want to map to src when doing imports.
}
...

When my SCSS file does an import like this @import 'src/styles/variables.scss';, the plugin fails. Note that src is defined as a path in tsconfig (see above) to map to the actual folder my-source-code-folder.

[typescript-plugin-css-modules] Failed Error: Can't find stylesheet to import.
  ╷
1 │ @import 'src/styles/variables.scss';

BUT, if I use @import 'my-source-code-folder/styles/variables.scss'; it works. From this it looks to me like this plugin respects the baseUrl which automatically creates the non-relative paths for folders located in the root of the project.

So the fix for me is to just import using a non-relative path that starts with the actual folder name where the file to be imported is located.

I think this is a bug in the plugin, but I will not reopen the issue because it’s not a big deal for me. I however wanted to post this comment in case someone else may have this problem and needs to know why it’s happening.