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?
AlanBlanchetNeovision
commented
1 year 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
1 year ago This is an upstream bug in Vite.
The resolver used by sass doesn't include custom Vite plugins.
aleclarson
commented
1 year 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
1 year 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
9 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 }
);
}
},
},
]
}
})
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: