Vue 中样式控制及穿透方法总结

目录

Vue 中样式控制及穿透方法总结

一、Vue2 中让 CSS 只在当前组件生效

二、Vue2 中使用 Sass 和 Stylus

三、Vue2 中 Sass 和 Stylus 的样式穿透

四、Vue3 中的样式控制和穿透

---

在 Vue 项目开发中，样式的控制和穿透是一个常见的问题。本文将结合视频内容，总结 Vue2 中的样式控制方法，并探讨在 Vue3 中的应用及相关代码示例。

一、Vue2 中让 CSS 只在当前组件生效

在 Vue2 中，如果要让 CSS 只在当前组件生效，可以在style标签中添加scope属性。

例如：

<template>
  <div class="app">
    <header></header>
    <footer></footer>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
.app {
  /* 只在当前组件生效的样式 */
}
</style>

这样可以避免多个组件之间的样式冲突。

二、Vue2 中使用 Sass 和 Stylus

1. 下载和引入 Sass

   • 在 Vue2 项目中使用 Sass，需要先安装sass-loader和node-sass。
   • 命令：npm install sass-loader node-sass --save
   • 在style标签中设置lang="sass"，并添加scope属性。
    

   例如：

   <template>
     <div class="app">
       <!-- 组件内容 -->
     </div>
   </template>

   <script>
   export default {
     name: 'App',
   };
   </script>

   <style lang="sass" scoped>
  .app
       color: red
   </style>

1. 下载和引入 Stylus

   • 安装stylus-loader和stylus。
   • 命令：npm install stylus-loader stylus --save
   • 在style标签中设置lang="stylus"，并添加scope属性。
    

   例如：

   <template>
     <div class="app">
       <!-- 组件内容 -->
     </div>
   </template>

   <script>
   export default {
     name: 'App',
   };
   </script>

   <style lang="stylus" scoped>
  .app
       color: blue
   </style>

三、Vue2 中 Sass 和 Stylus 的样式穿透

在 Vue2 中，当使用带有scope属性的样式时，局部样式无法修改全局引入的组件的样式。这时需要使用样式穿透。

1. Sass 的样式穿透
   • 使用::v-deep或>>>选择器。
   • 例如：

   <template>
     <div class="app">
       <third-party-component></third-party-component>
     </div>
   </template>

   <script>
   export default {
     name: 'App',
   };
   </script>

   <style lang="sass" scoped>
   ::v-deep.third-party-component-class {
       background-color: red;
   }
   </style>

1. Stylus 的样式穿透
   • 可以使用::v-deep或>>>选择器，也可以使用/deep/选择器。
   • 例如：

   <template>
     <div class="app">
       <third-party-component></third-party-component>
     </div>
   </template>

   <script>
   export default {
     name: 'App',
   };
   </script>

   <style lang="stylus" scoped>
   /deep/.third-party-component-class {
       background-color: pink;
   }
   </style>

四、Vue3 中的样式控制和穿透

在 Vue3 中，样式控制和穿透的方法与 Vue2 类似，但有一些变化。

1. 让 CSS 只在当前组件生效

   • Vue3 中仍然可以使用scoped属性来让 CSS 只在当前组件生效。
    

   例如：

   <template>
     <div class="app">
       <!-- 组件内容 -->
     </div>
   </template>

   <script>
   import { defineComponent } from 'vue';

   export default defineComponent({
     name: 'App',
   });
   </script>

   <style scoped>
  .app {
       /* 只在当前组件生效的样式 */
   }
   </style>

1. 使用 Sass 和 Stylus

   • 安装和引入方法与 Vue2 类似，但需要注意版本兼容性。
    

   例如：

   <template>
     <div class="app">
       <!-- 组件内容 -->
     </div>
   </template>

   <script>
   import { defineComponent } from 'vue';

   export default defineComponent({
     name: 'App',
   });
   </script>

   <style lang="sass" scoped>
  .app
       color: red
   </style>

1. 样式穿透

   • Vue3 中可以使用::v-deep或:deep()选择器进行样式穿透。
    

   例如：

   <template>
     <div class="app">
       <third-party-component></third-party-component>
     </div>
   </template>

   <script>
   import { defineComponent } from 'vue';

   export default defineComponent({
     name: 'App',
   });
   </script>

   <style scoped>
   :deep(.third-party-component-class) {
       background-color: blue;
   }
   </style>

总之，在 Vue 项目中，合理地控制样式的作用范围和进行样式穿透是非常重要的，可以提高代码的可维护性和可读性。在 Vue2 和 Vue3 中，虽然具体的实现方法略有不同，但基本原理是相似的。希望本文对你在 Vue 项目中的样式控制有所帮助。