External mixin breaks hinting and shows errors in TSX files
reintroducing opened this issue · 2 comments
Describe the bug
I am trying to import an external mixin called include-media in my Sass modules but it is causing issues with this plugin.
To Reproduce
Steps to reproduce the behavior:
- Go to https://codesandbox.io/p/sandbox/zealous-bogdan-0xmuhr
- Open App.tsx and hover over the
css
import and notice it saysroot
as one of the properties which is correct. Also, no TS errors (red underlines). - Open App.module.scss and uncomment the first line (
@use "include-media" as im;
) - Go back to App.tsx and notice that
css.root
is underlined red as an error and hovering overcss
no longer shows the propertyroot
.
Expected behavior
Importing the include-media mixin should not break TypeScript hinting or show issues in the tsx file.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
looks like dont work on codesandbox because, it wont find the path to node_modules, the thing is if you are working locally, the only thing you need is to add a tilde in the start of the import/use like this:
@use "~include-media/dist/_include-media.scss";
this should work.
As @LeoCaprile said, it looks like this is path related.
The authors of this package say:
You can download the file manually, install via npm with npm install include-media or via Yarn with yarn add include-media.
Finally, import the file dist/_include-media.scss into your project.
I was able to get this working on CodeSandbox with:
@use "include-media/dist/_include-media.scss" as im;
Sorry that this issue slipped by unanswered for so long, and thanks to @LeoCaprile for jumping in.