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

用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。