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

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

• 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样式