question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

----------- 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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
mfpopacommented, Mar 5, 2020

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.

1reaction
mrmckebcommented, Apr 27, 2020

This has been released, sorry for the long delay.

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

less-loader | webpack - JS.ORG
less -loader applies a Less plugin that passes all queries to the webpack resolver if less could not resolve @import . Thus you...
Read more >
less loader paths option doesn't work · Issue #79 - GitHub
Starting with less-loader 4, you can now choose between the webpack resolver and the Less resolver. If you specify the paths option, the...
Read more >
less-loader - webpack 3 documentation
The less-loader applies a Less plugin that passes all queries to the webpack resolver. Thus you can import your Less modules from node_modules...
Read more >
Webpack does not resolve less loader - Stack Overflow
The problem is that you are importing a . less file from node_modules , this is unexpected. files in node_modules should be ....
Read more >
node_modules/less-loader · master - GitLab an der TU Chemnitz
less -loader applies a Less plugin that passes all queries to the webpack resolver if less could not resolve @import . Thus you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found