vue-cli3/4：css样式层次分析及scoped

最近读到一篇文章：vue:单页应用style样式层次分析及处理，看了很受启发，自己也动手测试一下，结果结果差别很大······
所以在巨人的肩膀上，自己总结一番：

1. css样式层次分析

---

vue中样式的引入方式大概如下：

• 样式可以在main.js中引入
• 在模块js文件中引入
• 在组件中的style标签引入
• 在组件中的script标签引入
• 在index.html的body中引入。

问题 ？

1. 从不同位置引入的样式到底是什么关系？
2. 在实际定义样式时应该定义在哪个位置，以避免样式产生的冲突？

先说结论

1. 首先public中的index.html中 link 引入的css首先加载
2. 其次按照 mian.js中的引入顺序加载，遇到css加载，遇到app.vue组件加载，遇到router加载子组件的css
3. 异步组件加载的时候加载css，路由切换的时候继续存在

环境

新建vue项目测试：

vue create vue-style-test
npm run serve

结果

按照上述结论，看下面的结果

代码段1：组件ComA是同步加载的

import './main.css'
import App from './App.vue'
import router from './router'

代码段2：组件ComA是同步加载的

import App from './App.vue'
import './main.css'
import router from './router'

代码段3：组件ComA是同步加载的

import App from './App.vue'
import router from './router'
import './main.css'

代码段4：组件ComA是同步加载的

import router from './router'
import App from './App.vue'
import './main.css'

代码段5：组件ComA是异步加载的

懒加载的组件，当路由加载的时候，才加载css，切换路由css仍然存在

const routes = [
  {
    path: '/',
    name: 'ComA',
    component: () => import('../components/ComA.vue')
  },
  {
    path: '/comb',
    name: 'ComB',
    // component: ComB
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../components/ComB.vue')
  }
]

2. scoped

---

1. 使用 scoped 后，父组件的样式将 不会渗透到子组件 中。
2. 不过一个 子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
3. 这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。