Open vimcaw opened 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).
Unfortunately, after setting loose: true
and remove extensions
, it still doesn't work and throw the same error.
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?
Hi, @aleclarson . Maybe reopen this issue? I'm getting similar errors on my side. Trying to jump to vite from webpack.
If someone can reproduce this in the ./demo
folder and link it here, that would be great
@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.
@aleclarson , hi, did you find any time to check that?
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:css
I 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
This is an upstream bug in Vite.
The resolver used by sass
doesn't include custom Vite plugins.
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!
@aleclarson omg, it's been 10 month, thank you))
@aleclarson I added loose: true but not working in SCSS
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 }
);
}
},
},
]
}
})
config:
tsconfig.json:
I set baseUrl to
src
dir, 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-paths
it throws an error: