vue样式问题

样式

1. 在vue项目中 全局样式 直接在 main.js 引入 或者在 APP.vue 中引入

// main.js
import '@/assets/css/base.css'

// App.vue
<style src="./assets/css/base.css"> </style>

2. 局部组件中样式 在该组件中生效;

<style scoped src="@/assets/css/about.css"></style>
<style lang="sass" scoped>
    ... some style

</style>

说明

scope 属性的样式
会给 dom 元素上添加一个 以 data-v 开头的属性,然后通过 属性选择符选中样式
元素

选中的样式 .setfontSize[data-v-039c5b43]{...some style}
也是说 父组件无法直接修改子组件内的样式

解决办法

1. 穿透scoped
stylus的样式穿透 使用>>>     sass和less的样式穿透 使用/deep/
    .mystyle /deep/ .childCompentsstyle

2. 使用两个style标签来修改样式
<style>
    /* 用于修改第三方库的样式 */
</style>
<style scoped>
    /* 自己的组件内样式 */
</style>

3. 添加class 
通过在外层dom上添加唯一的class来区分不同组件