【Vue面试题】Vue中如何做样式穿透

一、让css只在当前组件生效

<style scored></style>

• Header.vue

<template>
  <div class="main">
    这是header
  </div>
</template>
<style scoped>
.main{
  background-color: red;
}
</style>

• Footer.vue

<template>
  <div class="main">
    这是footer
  </div>
</template>
<style scoped>
.main{
  background-color: green;
}
</style>

• Home.vue

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

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  name: "Home",
  components:{
    Header,
    Footer
  }
};
</script>

二、scss、stylus

scss样式穿透

1.下载

npm install sass-loader node-sass --save

2.引入scss样式

<style lang="scss" scoped>

3.scss样式穿透
父元素 /deep/ 子元素

<style lang="scss" scoped>
.swiper-pagination /deep/ .swiper-pagination-bullet-active{
  background: red;
}
</style>

stylus样式穿透

1.下载

npm install stylus stylus-loader --save

2.引入scss样式

<style lang="stylus" scoped>

3.stylus样式穿透
父元素 /deep/ 子元素
父元素 >>> 子元素

<style lang="stylus" scoped>
.swiper-pagination /deep/ .swiper-pagination-bullet-active{
  background: red;
}
.swiper-pagination >>> .swiper-pagination-bullet-active{
  background: yellow;
}
</style>