vscode-easy-less icon indicating copy to clipboard operation
vscode-easy-less copied to clipboard

@import unable to resolve less files in node_modules folder

Open devuxer opened this issue 2 years ago • 1 comments

Expected behavior

@import "antd/dist/antd.less"; automatically searches in /node_modules/antd/

Actual behavior

@import "antd/dist/antd.less"; throws the following error and no css file is generated on save:

'antd/dist/antd.less' wasn't found. Tried - c:\Users\Dan\Website\src\front-end\styles\antd\dist\antd.less,npm://antd\dist\antd.less,antd\dist\antd.less

Details

  • I'm running the latest version of Visual Studio Code and Easy LESS on Windows 10 (which is updated regularly)
  • Other VS Code extensions installed: Azure Account, Azure App Service, Azure Resources, change-case, ESLint, Prettier - Code Formatter, Prisma, Search Editor: Apply Changes, Shifter, Template String Converter, and XML Tools
  • The less file containing this import is located in /src/front-end/styles/app.less.
  • I tried with relativeUrls both on and off
  • I also tried several different URLs, including the following, but ran into the same issue with all of them:
    • /antd/dist/antd.less
    • ~antd/dist/antd.less
    • ~/antd/dist/antd.less
    • /node_modules/antd/dist/antd.less
    • npm://antd/dist/antd.less
  • If I install less and run lessc --js src/front-end/styles/app.less src/front-end/styles/app.css, it worked as expected (no errors and CSS file gets created with all the imported styles)
  • If I CTRL+click the import link n VS Code, the file is found and opens

devuxer avatar Aug 07 '22 20:08 devuxer

less compile use require.resolve to get package from node_modules but extension use inside less package that only can get from extension's node_modules directory,the way to @import from node_modules is using local less compile from workspace

aceHubert avatar Oct 26 '23 01:10 aceHubert