alias BUG

[chdjj]

• [√] Read the docs.
• [√] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.

Describe the bug

在对于被使用别名引入的scss文件，在被引入的这个文件中所使用别名引入的静态文件没有被替换为正确的路径。

Reproduction

github链接

System Info

• vite version: 2.0.1
• Operating System: Mac OS 10.12
• Node version: v13.14.0
• Package manager (npm/yarn/pnpm) and version: npm/6.14.4

[chdjj]

you should append the extension

I try append the extension, But not yet。

resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, './src') },
      { find: "~sass", replacement: path.resolve(__dirname, './src/assets/sass') },
      { find: "~assets", replacement: path.resolve(__dirname, './src/assets') }
    ],
    extensions: ['.js', '.vue', '.json', '.scss', '.css']
  }

The path did not load properly

console:

GET http://localhost:3000/assets/sass/~assets/logo.png 404 (Not Found)

[chdjj]

@import "~sass/app.scss";

Loading SCSS file is normal,
But I want to use aliases in the SCSS file as well.
Use @import "~sass/app.scss"; is not working,
But use @import "./assets/sass/app" is normal.
I think it's a bug.

[HomyeeKing]

using url() to rebase the url can solve this
but I am not sure whether this is a bug with bare @import

[xiaohulu]

I also have this bug.

I use path alias.

<style lang="scss" scoped>
@import "/@/assets/styles/variables.scss";

</style>

throw errors

[plugin:vite:css] Can't find stylesheet to import.
  ╷
2 │ @import "/@/assets/styles/variables.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

user relative path works.

<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

</style>

node: 14.16.0
npm: 7.6.0
vite: 2.0.5
vue: 3.0.7

[xiaohulu]

Still Can't find stylesheet to import when I update to vite 2.1.3

[patak-dev]

@xiaohulu would you open a new issue with a minimal reproduction against vite 2.1.3? Thanks!

[fabd]

Thanks for the bug fix, I also came across this earlier. 👍

Now, in sass I can use the tilde aliases in eg. @import '~styles/foo or background: url("~assets/images/foo.gif").

However in a .vue template image file, the tilde doesn't work : eg. <img src="~assets/images/logo-rune.png" ...

Using an at symbol style of alias like @assets/... works in both vue <img src="@assets/images/logo-rune.png" and scss file: background: url("@images/rune-bg2.gif") ...`

I imagine the ~ tilde style alias doesn't work in .vue file because it's considered to be a node_module right?

So am I correct in saying then, that as best practice, weŕe better off to just always use at symbole style aliases if they work in both cases ? ( eg. @assets )|

Is there any point to using tilde alias if it doesn't have a consistent behaviour betweenm vue and sass imports?