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.

import with tilde for node_modules package

See original GitHub issue

I’m looking the simpliest way to import less files with the ~alias from a node_modules like less loader in webpack.

FileError: '~@folder/composant/file.less' wasn't found

It seems that less can’t understand this. Since I don’t need webpack here, is there any solution here?

Just made a test in the: FileManager.prototype.loadFile and added a dirty filename = filename.remplace('~', ''); . Then added include-path=node_modules in my CLI and it worked.

What would be the best way to improve this? I could make the pull-request.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:14 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
matthew-deancommented, Jan 4, 2019

When compiling in a Node environment, just write @import "folder/composant/file.less"; with folder being the name of the module.

1reaction
kevinramharakcommented, Jan 9, 2019

@rjgotten The problem is that for my use case i have no control over the node environment nor less executable. My team uses a visual studio extension named web compiler. This compiler uses a local install of less and uses the executable lessc inside that installation. The shell command executed by the extension looks like the following

$ # the enviroment state
$ pwd
/my/project/
$ tree
- .
  - less
     - style.less
  - css
     - style.css
  - node_modules/
    - bootstrap
       - less
         - bootstrap.less

$ # the command executed by the extension
$ /visualstudio/extensions/webcompiler/lessc /my/project/less/style.less /my/project/css/style.css

an @import 'bootstrap/less/bootstrap.less' inside ./less/style.less will not resolve to /my/project/node_modules/bootstrap/less/bootstrap.less (or any parent directory with a node_modules folder). I would expect lessc to resolve npm imports regardless of its install path. It is not

I cannot do a relative import because of npm flattening dependencies I cannot guarantee its path.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is the ~ (tilde) doing in this javascript import?
Tilde ( ~ ) used in conjunction with webpack means that a lookup is performed against node_modules to resolve the path.
Read more >
node-sass-tilde-importer - npm package - Snyk
A node-sass custom importer which turns ~ into absolute paths to the nearest parent node_modules directory. Visit Snyk Advisor to see a full...
Read more >
tilde-sass - npm
A SASS compiler with tilde (~) support for resolving node_modules path and supports new sass' syntax.. Latest version: 1.1.0, ...
Read more >
Dependency resolution - Parcel
Tilde specifiers start with ~ , and resolve relative to the nearest package root from the importing file. A package root is a...
Read more >
Tilde | npm.io
A node-sass custom importer which turns ~ into absolute paths to the nearest parent node_modules directory. node-sassscsssasstildewebpacksass-loadernode_modules.
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