一、让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>
文章评论