Vue webpack打包后,css样式发生改变或不起作用

探讨了在Vue项目中使用<style scoped>属性避免样式污染的重要性及常见问题,包括webpack配置错误导致的样式失效,以及如何正确配置loader确保样式正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用run dev build打包后,发现样式改变了,最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,但是想着

<style  scoped>
</style>

在style标签上添加scoped属性,就表示它的样式作用于当下的模块,样式私有化的目的就不会相互污染啊!为什么打包后会出现这样的结果呢!不太理解!

一.css样式发生改变

<style scoped>的scoped属性:

1)加了scoped属性的组件,可以维护当前组件样式不受其它组件影响

2)加了scoped属性的父级组件,不能修改子组件元素样式(无路子组件加没属性scoped,因为scoped只能维护当前组件元素)

3)不加scoped属性的父级组件,可以修改子组件样式

4)加了scoped属性的父级组件,也可以强行控制加了scoped属性的子组件,方法是:.a >>> .b或者css预处理中的 .a /deep/

二.css样式不起作用

原因:

1.使用了webpack2的语法规则不正确; webpack2要求必须写-loader;

2.可能是只写了css-loader,没有写style-loader;

3.顺序反了,必须写成 style-loader!css-loader;

没写style-loader则build文件会生成,但你会发现页面中js不起作用;

没写css-loader则会直接报错:’You may need an appropriate loader to handle this file type.’ 

style-loader只是没起作用而不报错就意味着它的作用是将样式插入到DOM元素中;结合网上的答案以及观察预览页面发现:style-loader会在页面的header标签里生成内部的<style></style>

css-loader 会报错,是因为它影响到webpack的build的过程了。结合网上分享以及’You may need an appropriate loader to handle this file type.’报错信息,意味着css-loader的存在使得在js中通过require或者import引入css成功;通过css-loader,可以实现在js文件中通过require的方式,来引入css。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值