Not work with less and webpack when I choose webpack resolvers in less-loader

[dancon]

----------- Update 2020-03-16 -----------
I have fixed the issue by writing a less-plugin-aliases that work with typescript-plugin-css-modules customRenderer, you just modify the config as below:

"compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          // ...
          "customRenderer": "node_modules/less-plugin-aliases/lib/customRender.js"
        }
      }
    ],
    // ....
   "paths": {
        // config the paths
   }
}

You can use the less-plugin-aliases now, it works well in my project.

The plugin will read the tsconfig.json default to get the compilerOptions to resolve the @import ~xx case, and I also commit a PR that inject the compilerOptions into customRenderer from ts plugin (I think this way is more elegant and power more to customRenderer ), after that the less plugin will not read tsconfig.json anymore.

---

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

As less-loader says, I can choose webpack resovler by prepending my @import path with ~, then the plugin does not work as expected.

Describe the solution you'd like
A clear and concise description of what you want to happen.

In less file:

@import '~styles/variables.less';

// some code

In tsconfig.json

{
    "compilerOptions": {
         ...
         "paths":  {
              "styles/*": [path to styles folder]
         }
         ...
   }
}

In webpack.config file I also defined resolver.alias

"styles": path to styles folder

Maybe when the plugin detect a @import path start begin ~, deal it with paths defined in tsconfig.json

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Now, I just use relative path to make it work, but it's ugly and nonportable.

Additional context
Add any other context or screenshots about the feature request here.

[mrmckeb]

Hi @dancon, thanks for reporting this.

Can you please provide a small reproduction? I will then take a look and try to resolve this by the end of the weekend!

[mfpopa]

EDIT: I moved this to #78 as it might be a different issue.

PS. thanks @mrmckeb for creating and maintaining this. It is a much better solution than the plugins/loaders/solutions that create .d.ts files next to each CSS/SCSS file.

[dancon]

@mrmckeb I'm so sorry for replying late, here is the reproduction repo, thank you for your greate job !

[mrmckeb]

Thanks @mfpopa.

Hi @dancon, this is not supported by Less natively, it's a feature of the loader. So the only way to make this work is to manually normalise the path based on the TS paths or something similar.

Would you like to try implementing that? If not, I can try over the weekend.

[dancon]

@mrmckeb Yes, I know why it doesn't work, and I'd love to fix it, but maybe by this weekend.

[dancon]

@mrmckeb Hi, I'm trying to add the feature support by writing a less plugin, please note that ~

[kozlovvski]

+1, this feature would be also awesome in sass/scss. I use CRA with sass-loader and baseUrl: "src/" in tsconfig.json, so later I can import variables in any scss file like this:

@import "~styles/variables" // assuming, that there is a file "src/styles/_variables.scss"

By the way, thanks for this great package, it really makes me not pull out hairs from my head while working. It would be nice to see this kind of feature implemented in Typescript by default in the future.

[mrmckeb]

I'll release this today, thanks!

[mrmckeb]

This has been released, sorry for the long delay.

Please see: https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v2.3.0