search

IndexXuan / vue-cli-plugin-vite

Use vite today, with vue-cli.
https://github.com/IndexXuan/vue-cli-plugin-vite
MIT License
392 stars 24 forks source link

How to use `alias` in css? #33

Closed jingguangyan closed 3 years ago

jingguangyan commented 3 years ago

Run the example with yarn vite.

WechatIMG44

20210609182655

jingguangyan commented 3 years ago

I tried the solution mentioned in supported by vite#2185, but it didn't work; I don't know if my usage is wrong.

1623297473576

IndexXuan commented 3 years ago

@ alias to src. why you put ～ before it. ～ means node_modules.

IndexXuan commented 3 years ago

you write some vite syntax in vue.config.js webpack config. totally wrong…

jingguangyan commented 3 years ago

@ alias to src. why you put ～ before it. ～ means node_modules.

Because production environment packaging requires vue@cli(webpack) webpack css-loader needs to add ~ before alias

IndexXuan commented 3 years ago

胡说八道，只见过 

~@ant-design/vue/xxx.css，这里的 @ant-design 是 npm package scope。
~element-ui/theme-chalk/xxx，这里就不需要，~ 永远代表 node_modules

你这个就直接写 @/assets/xxx.png，就代表 src/assets/xxx.png，能咋了，还能不出来图 ？？？

jingguangyan commented 3 years ago

使用vite作为开发环境时，直接写 @/assets/xxx.png可以加载图片。 但是当我使用 yarn build 打包时，会产生如下错误： 20210610162617

IndexXuan commented 3 years ago

我拉你分支看下

IndexXuan commented 3 years ago

image

好像还真不知道，我们项目都用的 CDN 远端引入，直接 url(https://xxxx) 你这个先用相对路径吧，看起来难以调和 vite 和 vue-cli 对于这块的处理。

by the way，template 里可以用 alias，例如 <img src="@/assets/background.svg" /> 你可以试试

jingguangyan commented 3 years ago

这个 example 可以兼容 vite 和 cli；

vite.config.js文件中 添加的 '~@': path.join(__dirname, './src')发挥了作用；

所以有没有可能是 vite-plugin-vue2 的问题，我在这里发现了 @fs。

IndexXuan commented 3 years ago

是个办法，但比较 hack，可以算作一种解决方式吧。算是 has workaround.

因为对于 vite 来说，@/assets/xxx.png 不论 dev 还是 build 都是支持的。但是 vue-cli(webpack 的 css-loader) 似乎必须要求 ~@/assets/xxx.png，你这个还真是一种办法 ... 我考虑下要不要加到这个插件内部来兼容。

IndexXuan commented 3 years ago

是的，vue2 不支持，我看下 vite-plugin-vue2 怎么处理 Vue SFC 的，没有识别 ~@** Vue2/Vue3 都不支持 ~@ 啊， 我这边试了。。。

jingguangyan commented 3 years ago

这个example 在你那里可以正常运行吗？

jingguangyan commented 3 years ago

关于 ~@ 现在我的所有vue2.x项目中都是这么用的，可以正常运行；

另外，在alias中添加 '~@': path.join(__dirname, './src') 不会奏效，使用的时候需要 ~~@/assets/xxx.png

IndexXuan commented 3 years ago

我的意思，在我这边 vue.config.js 不动，给 vite 加上新的 ~@ alias，然后 background url 使用 ~@/assets/xxx.png，不可用，不论是 vue2 项目还是 vue3 项目。今天没时间先不看了，之后有空我看下吧。我这边是不行 ... 还是会变成 @fs/

jingguangyan commented 3 years ago

我给你发了封邮件，那里面有我的联系方式，如果方便的话，可以加个微信吗？

IndexXuan commented 3 years ago

should raise vite issue instead. (for different result of template block img src and style block background url)

IndexXuan commented 3 years ago

@jingguangyan raise this issue in vite side, wait for some feedback.