vue3 引入css文件问题？

Question

如图，如果使用使用的是 router-link 那只要访问过的CSS样式文件会全部加载，怎么然他只加载当前模板的 CSS 文件

/src/App.vue

<template>
    <div>
        <router-link to="/" style="margin-left: 30px; color: #0a0c0d;">Home</router-link>
        <router-link to="/about" style="margin-left: 30px; color: #88334b;">About</router-link>
        <router-link to="/news/list/1" style="margin-left: 30px; color: #c7be04;">新闻列表</router-link>
        <router-link to="/news/item/1" style="margin-left: 30px; color: #17720b;">新闻详情</router-link>
    </div>

    <RouterView />
</template>

<script>
export default {
    name: "App"
}
</script>

<style scoped>
</style>

/src/views/HomeView.vue

<template>
    <h1>HomeView</h1>
</template>

<script>
export default {
    name: "HomeView"
}
</script>

<style scoped>
@import url('@/assets/css/home.css');
</style>

/src/views/news/list/IndexView.vue

<template>
    <h1>news:list:IndexView</h1>
</template>

<script>
export default {
    name: "IndexView"
}
</script>

<style scoped>
@import url('@/assets/css/news/list/index.css');
</style>

如果加了 scoped 那当前文件里面的子组件不起作用，如果不加，所有文件都会被 CSS 文件覆盖，明明 /src/views/news/list/IndexView.vue 和 /src/views/HomeView.vue 没有任何关联呀？

Answer 1

CSS样式隔离的问题，看起来是因为你的CSS类名命名不规范的表现。

如果你不想使用 scope 那么就需要按一定规则去设计CSS类名。比如说 BEM命名规范。
如果你不想为了起CSS类名烦恼，想使用 scope 来隔离样式，然后又想要控制子组件的样式，那么需要使用样式穿透，比如说 CSS 所原生支持的 >>>，或者 Vue3 推荐使用的 :deep() 来包裹。

相关阅读

#深度作用选择器 - 单文件组件 CSS 功能 | Vue.js
用更合理的方式写 CSS
MindBEMding – getting your head ’round BEM syntax
梳理 CSS 模块化
CSS 模块化 & 样式隔离
Vue 中的样式穿透 v-deep、/deep/ 和 >>>