search

vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

style scoped模式下编译keyframes出错 #1807

Open lanmaomm opened 3 years ago

lanmaomm commented 3 years ago

Version

16.1.2

Reproduction link

https://github.com/lanmaomm/test

Steps to reproduce

yarn install yarn serve 查看css编译结果

What is expected?

.play[data-v-7ba5bd90] { display: inline-block; width: 11px; height: 14px; background-size: 100%; background-position: center; background-repeat: no-repeat; -webkit-animation: playing-7ba5bd90 0.9s linear infinite; animation: playing-7ba5bd90 0.9s linear infinite; transition-delay: 300ms; } @-webkit-keyframes playing-7ba5bd90 { 0% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 32% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 33% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 66% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 67% { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 99% { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 100% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } } @keyframes playing-7ba5bd90 { 0% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 32% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 33% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 66% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 67% { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 99% { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 100% { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } }

What is actually happening?

.play[data-v-7ba5bd90] { display: inline-block; width: 11px; height: 14px; background-size: 100%; background-position: center; background-repeat: no-repeat; -webkit-animation: playing-7ba5bd90 0.9s linear infinite; animation: playing-7ba5bd90 0.9s linear infinite; transition-delay: 300ms; } @-webkit-keyframes playing-7ba5bd90 { 0%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 32%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 33%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 66%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 67%[data-v-7ba5bd90] { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 99%[data-v-7ba5bd90] { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 100%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } } @keyframes playing-7ba5bd90 { 0%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 32%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } 33%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 66%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/1608790978371accc6073ef~0x0.png'); } 67%[data-v-7ba5bd90] { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 99%[data-v-7ba5bd90] { background-image: url('https://sf6-ttcdn-tos.pstatp.com/img/edux-data/160879100063357a8579e65~0x0.png'); } 100%[data-v-7ba5bd90] { background-image: url('https://sf3-ttcdn-tos.pstatp.com/img/edux-data/160879095347490c166341e~0x0.png'); } }

https://github.com/vuejs/vue-loader/blob/next/src/stylePostLoader.ts#L2 是不是16.x版本使用@vue/compiler-sfc处理style导致了这个问题？

yyyanghj commented 3 years ago

see https://github.com/vuejs/vue-next/pull/3308

llllllllllx commented 3 years ago

暂时解决方案可以将 @vue/compiler-sfc 退回至3.0.0版本

npm i -D @vue/compiler-sfc@3.0.0
lanmaomm commented 3 years ago

暂时解决方案可以将 @vue/compiler-sfc 退回至3.0.0版本

npm i -D @vue/compiler-sfc@3.0.0

好的，感谢🙏