怎么在vue中添加全局样式以及scoped的作用

1，添加全局样式可以通过新建一个css样式表

在根组件中通过入口文件（通常为main.js）中 import 引入

 

2，scoped的作用

 

组件中的样式标签中的 scoped 属性表明标签中的样式只适用于当前组件，不希望污染全局样式。

 

组件的样式中有 scoped ，浏览器在渲染时会为该组件添加一个唯一标记 data-v-xxxxxxxx,这样的话，不同组件之间的样式不会冲突，也不会污染全局样式。

 

 

3，怎样修改组件的style 属性为 scoped 中的样式

A.如果是 stylus 的样式的话，使用 >>>

	 .wrapper >>> .ant-tabs-nav-scroll {
      background-color: #ffffff;
      padding-left: 24px;
  }

 

B.非stylus的话，使用 /deep/

 .wrapper /deep/ .ant-tabs-nav-scroll {
      background-color: #ffffff;
      padding-left: 24px;
  }

 

C.使用全局样式表直接覆盖

 

相关参考来源  https://blog.csdn.net/cvper/article/details/80153677  

                        https://www.jianshu.com/p/b92e2a022cd8