Vue3+scss 组件内部使用全局样式不生效

技术栈:Vue3+Vite+SCSS

全局配置了scss样式,部分组件内部使用全局样式不生效

遇到这个问题时,发现在views组件中使用的样式能生效,但是子组件内使用的就不能生效,通过控制台查看,class绑定上了,但是对应的css样式没找到。

global.scss

Vue3+scss 组件内部使用全局样式不生效_第1张图片

子组件

子组件

渲染效果

Vue3+scss 组件内部使用全局样式不生效_第2张图片
最后,通过查找资料,发现,是因为没有触发相应的样式编译,导致。

解决方案1

在不生效的组件里面写一个样式,任何样式或者注释都可以,因为不写没触发编译(最优解)

解决方案2

父级样式去掉scope(有局限性,不适用所有场景)

你可能感兴趣的:(scss,VUE3,Vite,scss,vue.js,前端)