使用scoped实现局部样式隔离，通过::v-deep修改子组件样式，在main.js引入全局样式，结合lang属性使用Sass等预处理器提升可维护性。
在Vue项目中引入CSS，尤其是通过单文件组件（.vue文件）管理样式，是开发中的常见需求。合理使用样式可以提升组件的可维护性和视觉表现。以下是几种实用的样式应用技巧。
局部样式与作用域隔离
默认情况下，style标签中的CSS会作用于全局，容易造成样式污染。为避免这个问题，推荐使用 scoped 属性：
<style scoped>
添加 scoped 后，Vue会自动为当前组件内的元素添加唯一属性（如 data-v-f3f3eg9），并重写CSS选择器，使样式仅作用于当前组件。
立即学习“前端免费学习笔记（深入）”；
例如：
<template>
<div class="tip">这是一条提示</div>
</template>
<style scoped>
.tip { color: #f60; }
</style>
这里的 .tip 样式不会影响其他组件中的同名类。
深度选择器处理子组件样式
当需要修改子组件内部的样式时，scoped 默认无法穿透。这时可使用深度选择器：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- ::v-deep（推荐写法）
- ::v-deep() 在某些构建配置中需加括号
示例：
<style scoped>
.container ::v-deep(.inner) {
color: blue;
}
</style>
这样就能影响到子组件中 class 为 inner 的元素。
全局样式与混合使用场景
有些样式需要全局生效，比如重置样式、通用工具类（如 .text-center）。可以通过以下方式引入：
- 在 src/assets/css 目录下创建 base.css 或 global.css
- 在 main.js 中引入：import './assets/css/global.css'
也可以在单文件组件中结合使用局部和全局样式：
<style scoped>
/* 仅作用于当前组件 */
.header { font-size: 18px; }
</style>
<style>
/* 全局样式，不带 scoped */
body { margin: 0; }
</style>
CSS预处理器提升开发效率
Vue支持 Sass、Less、Stylus 等预处理器，能更好组织复杂样式。以 Sass 为例：
- 安装依赖：npm install -D sass-loader sass
- 使用 lang 属性指定语言：
<style scoped lang="scss">
.container {
.title {
color: red;
&:hover { opacity: 0.8; }
}
}
</style>
借助嵌套、变量、mixin等功能，可以让样式更清晰易维护。
基本上就这些。掌握 scoped、深度选择器、全局样式引入和预处理器使用，就能高效管理Vue项目的样式结构。关键在于按需隔离，避免冲突，同时保持灵活性。
