aleclarson
commented
3 years ago loose: true should do the trick, and you can omit the extensions option (which is only used for resolving an import specifier without an explicit extension).
Open vimcaw opened 3 years ago
aleclarson
commented
3 years ago loose: true should do the trick, and you can omit the extensions option (which is only used for resolving an import specifier without an explicit extension).
vimcaw
commented
3 years ago Unfortunately, after setting loose: true and remove extensions, it still doesn't work and throw the same error.
aleclarson
commented
3 years ago Must be related to https://github.com/vitejs/vite/issues/2683, so not an issue with this plugin.
edit: Oh I missed this part of that issue:
And this doesn't apply to SCSS.
I wonder, is the resolveId hook even called for @use statements of SCSS files?
MetaMmodern
commented
2 years ago Hi, @aleclarson . Maybe reopen this issue? I'm getting similar errors on my side. Trying to jump to vite from webpack.
aleclarson
commented
2 years ago If someone can reproduce this in the ./demo folder and link it here, that would be great
MetaMmodern
commented
2 years ago @aleclarson hi, yes, I've done a demo, it's here: https://github.com/MetaMmodern/vite-tsconfig-paths/tree/scss-test. Should I make a PR?
Btw, if I try to resolve with using just vite it kinda works, in a way that it does not throw errors, but my app looks like it hasn't downloaded styles.. Update2: the problem there was that my styles were in :global block. Seems webpack required it. I removed that top-level block and it started working with manual aliases, this plugin still does not work.
MetaMmodern
commented
2 years ago @aleclarson , hi, did you find any time to check that?
ghost
commented
2 years ago Any updates ? I have this config
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: {
port: 3000
}
})And I get this error :
[vite] Internal server error: [sass] Can't find stylesheet to import.
╷
1 │ @import "scss/env.scss";
│ ^^^^^^^^^^^^^^^
╵
src/components/App/index.module.scss 1:9 root stylesheet
Plugin: vite:cssI found a workaround by manually adding paths to be resolved by vite.
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: {
port: 3000
},
resolve: {
alias: {
"scss": path.resolve(__dirname, "src/scss")
}
}
})Thanks
aleclarson
commented
2 years ago This is an upstream bug in Vite.
The resolver used by sass doesn't include custom Vite plugins.
aleclarson
commented
2 years ago Once this PR is merged, I have confirmed this will be fixed. (But you have to use loose: true)
https://github.com/vitejs/vite/pull/10555
Thank you @MetaMmodern for the reproduction!
MetaMmodern
commented
2 years ago @aleclarson omg, it's been 10 month, thank you))
laudaikinhdi
commented
1 year ago @aleclarson I added loose: true but not working in SCSS
emosheeep
commented
12 months ago I was involved in trouble too…But for now, I’ve used a hack way to achieve what I want
const resolvePlugin = tsconfigPaths({
// to support resolve alias in scss files(any other non-script files)
loose: true,
})
export default defineConfig({
resolve: {
alias: [
{
find: /(.*)/,
replacement: '$1',
async customResolver(source, importer, options) {
// HACK: resolve ts alias in style files.
if (importer && /\.scss/.test(importer)) {
// @ts-ignore
return await resolvePlugin.resolveId.call(
this,
source,
importer,
{ skipSelf: true }
);
}
},
},
]
}
})
tomasztomys
commented
2 months ago When will it be merged?
tgrushka
commented
1 month ago OMG, 2 years on the vite PR, no action at all.
Why can't this be fixed in this plugin instead of waiting for vite to do something? Why doesn't this plugin just add normal aliases instead of logic that depends on vite's internal workings?
This is an example of why I can't stand NodeJS projects. Seems no one can work together and make things work. Defaults are not reasonable. Things never "just work." Heavy configuration instead of convention over configuration.
aleclarson
commented
1 month ago Hi @tgrushka, sorry to hear you're frustrated. To be fair, it's not common for people to want their tsconfig.json paths to be applied in SCSS files. It's more of a nicety, really. If you want to push this forward, I would suggest forking the unfinished Vite PR (https://github.com/vitejs/vite/pull/10555).
Why doesn't this plugin just add normal aliases instead of logic that depends on vite's internal workings?
See this comment.
Why can't this be fixed in this plugin instead of waiting for vite to do something?
Maybe it can, but that would require someone who cares to implement it. Adding more maintenance burden for a fringe use case is probably out of scope, though.
This is an example of why I can't stand NodeJS projects. Seems no one can work together and make things work. Defaults are not reasonable. Things never "just work." Heavy configuration instead of convention over configuration.
I sympathize with this frustration. Sadly, everyone expects free work from maintainers. There really needs to be a VC-funded, full-stack TypeScript framework that embodies the Rails/Laravel philosophy. There might already be one? I haven't looked, since I enjoy the freedom and power of piecing together different tools into my own quasi-framework.
Anywho, wishing you the best. I know the ecosystem can be annoying at times (for some people, all the time). 💙
config:
tsconfig.json:
I set baseUrl to
srcdir, and import some scss by@use 'style/color'(there is a file in /src/style/color.scss )Everything works fine when I manually configure the alias, but when I use
vite-tsconfig-pathsit throws an error: