Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

现有的web应用vue组件style包含scoped属性,不改源代码的情况下,怎么在打包的时候去掉scoped #442

Open
dengxianxiao opened this issue Jul 22, 2022 · 4 comments

Comments

@dengxianxiao
Copy link

<style lang="less" scope> .demo { width: 100%; } </style>

打包为小程序后不生效

.demo[data-v-sdfs1212] { width: 100%; }

不改源代码的情况下,怎么在打包的时候去掉scoped

@yifan0817
Copy link

自己写loader或者插件吧。。

@JuneAndGreen
Copy link
Collaborator

JuneAndGreen commented Jul 25, 2022

可以写个前置 loader,在编小程序侧使用处理掉 scope。

比如这个 loader 就做了类似的事:https://github.com/Tencent/kbone/tree/develop/packages/vue-improve-loader

@jasonxxp
Copy link

貌似这样子后,样式都是全局的,不会作用在组件里,造成相互污染了。

@JuneAndGreen
Copy link
Collaborator

貌似这样子后,样式都是全局的,不会作用在组件里,造成相互污染了。

是的,受限于小程序自身不支持属性选择器,所以无法支持 scoped,对于动态技术(kbone 即属于此类)的话只能手动规避污染问题。

如果是静态技术或者直接原生开发的话,可以使用原生组件的 styleIsolation 属性。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants