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.

How do i import SASS from node_modules more easily? (E.g. tilde character)

See original GitHub issue

With Next.js and the sass package installed, i can write @import "bulmaswatch/cyborg/variables"; and it knows to import this file from the bulmaswatch package inside node_modules. This doesn’t work when i run this extension:

Error: File "c:\Users\Function\Documents\Git\pplus-website\src\bulmaswatch\cyborg\variables" not found
        on line 1 of sass/c:\Users\Function\Documents\Git\pplus-website\src\custom-bulma.scss
>> @import "bulmaswatch/cyborg/variables"; // swatch styles
   --------^

I have to write ../node_modules/bulmaswatch/cyborg/variables which is a bit annoying and also not consistent between different locations in my project. The tilde character ~ that indicated the node_modules directory in certain SASS setups also doesn’t work.

How can i make this better? Am i missing some configuration?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
glenn2223commented, Apr 6, 2022

Glad it works! I will push it officially soon

0reactions
glenn2223commented, May 19, 2022

Sorry for the delay. Available in v5.4.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

Support for tilde character to import from node_modules #2350
I have a webpack project where I distribute my SASS files which rely on other node_modules. Fortunately webpack has a sass-loader plugin that ......
Read more >
Importing Sass through npm - node.js - Stack Overflow
Then in your main scss file you can use: @import "~some-module/sass/app"; Tilde operator shall resolve any import as a module.
Read more >
import - JavaScript - MDN Web Docs - Mozilla
This is often a relative or absolute URL to the .js file containing the module. In Node, extension-less imports often refer to packages...
Read more >
Installation - Spruce CSS
To import it into your project, you must use Sass's @use , a newer type of @import similar to the JavaScript modules. Unlike...
Read more >
tilde-sass - npm
A SASS compiler with tilde (~) support for resolving node_modules path ... Start using tilde-sass in your project by running `npm i tilde-sass`....
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