Vue项目：style样式篇

在入口js文件main.js文件中引入。

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import ElementUi from ‘element-ui’

import ‘…/common/mainStyle.css’ //引入全局样式

Vue.config.productionTip = false

Vue.use(ElementUi);

/* eslint-disable no-new */

new Vue({

router,

render: h => h(App)

}).$mount(‘#app’);

2.2 index.html引入

---

/*引入公共样式*/

三、单个vue文件中引入样式

==============

vue文件style标签中import引入样式：

@import “…/assets/common/common.css”;//自定义.css的样式路径

四、样式作用范围控制

==========

很多时候，我们希望样式只在当前组件生效，样式可以私有化，避免影响其他的组件，造成全局的样式污染。

4.1 scoped私有作用域

---

在style标签中添加scoped属性，可以使样式只在当前的组件中生效，样式私有化。

原理：

其原理是在编译的时候，会给每个组件中的所有的dom节点样式添加一个唯一的data属性。

4.2 混合使用

---

在一个组件中同时使用scoped和非scoped样式。特别是对第三方组件样式的修改，想修改第三方组件的样式，又不想去掉scoped属性，影响别的组件。

4.3 深度作用选择器

---

如果希望scoped样式中的一个选择器能够作用的更深，例如影响子组件，可以使用 >>> 操作符。

备注1：别名

/deep/是>>>的别名

像sass之类的预处理器无法正确解析>>>。可以使用/deep/替代

备注2：深度选择器修改第三方组件样式

在第三方组件内部类外面套个类，再利用深度选择器这样可以修改样式，且不影响其他组件