Closed mashirozx closed 2 years ago
Hi,
I am also having the same issue with importing various components from Material.
@mashirozx have you managed to figure out a workaround in the meantime?
Nope till now, I just @use
the forward targets directly.
@mashirozx would you mind sharing an example please?
I'm having the same problem with @use
Error: Can't find stylesheet to import.
╷
1 │ @use "~@online/vue-global/scss/animations" as animations;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
I'm using vite 2.5.4 and sass 1.40.1
Same issue. I wanted to switch from @import
to @use
and @forward
. It is not possible because Vite is throwing the error.
[vite] Internal server error: Can't find stylesheet to import.
╷
3 │ @use 'abstracts';
│ ^^^^^^^^^^^^^^^^
Vite 2.8.4 and SASS 1.49.8. This issue should be fixed please, since @import
will be soon deprecated,
@mashirozx I was able to reproduce. But @material/chips/mdc-chips
does not exist. So I think this is working correctly.
Currently the docs says to do @use "@material/chips/styles";
. Was the docs not had updated?
If you change it to that, it works without error.
https://stackblitz.com/edit/vitejs-vite-u1eckg?file=src%2FApp.vue&terminal=dev
Also the reproduction at https://github.com/webpack-contrib/sass-loader/issues/804 works properly with vite.
@sapphi-red the dependency version should be locked: "@material/chips": "^13.0.0-canary.08398f880.0",
@mashirozx It seems there is no @material/chips/mdc-chips
in that version.
https://www.jsdelivr.com/package/npm/@material/chips?version=13.0.0-canary.08398f880.0
Well, seems so, I can't find which version I was using at the time I open this issue. But I'm sure that the @forward
rule doesn't work well on Vite, we can reproduce the issue by something else, like https://cdn.jsdelivr.net/npm/@material/chips@13.0.0-canary.08398f880.0/_index.scss
@mashirozx Is this what you intend? I think it is working well. https://stackblitz.com/edit/vitejs-vite-u93kky?file=src%2FApp.vue&terminal=dev
Hello @mashirozx. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction
will be closed if they have no activity within 3 days.
Sadly, I didn't save the code at that time, and also doesn't remember the detail to reproduce (seems @material/chips has huge upgrade since then and I can't find the old docs). But I'm pretty sure the @forward
issue with at least vite^2.4.2
. Can anyone else provide the reproduction? @jjstanton @lampewebdev @jrson83
We stooped using ˜
because vite does not come with that alias out of the box like vue-cli did.
So we have refactored our code.
Instead of using:
@use "˜@something/css/file.css";
we are using:
@use "node_modules/@something/css/file.css";
EDIT: Looking at the repo I think our problem was this: https://stackblitz.com/edit/vitejs-vite-fw386x?file=src%2FApp.scss&terminal=dev but again with @ or node_modules it works fine
Describe the bug
The
_index.scss
of this dep contains@forward
rules.More information:
There is the same problem in webpack, but can be solved like this, but I haven't see options like this in Vite's documentation.
Reproduction
yarn add @material/chips@canary
@use
the dep's style following documentation:System Info
Used Package Manager
yarn
Logs
Validations