vue中，页面的公共样式。

Question

给pages下面所有的.vue设置公共样式。

我今天在做测试的时候：

在home.vue:

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

<script>

  import Header from '../../components/header/header.vue'
  import Footer from '../../components/footer/footer.vue'

  export default{
    data(){
      return {msg: 'hello vue'}
    },
    components: {
      'i-header': Header,
      'i-footer': Footer
    }
  }
</script>

<style scoped>
  .home {
    min-width: 1221px;
  }
</style>

我这里要写一个页面的样式：min-width: 1221px;，其他页面也需要这个样式，所以它应该是公共样式。那么怎么才能在其他页面方便地做呢？
每个page都写就比较冗余。

Answer 1

后来我发现可以在页面@import公共样式：

<style scoped>

  @import '../../styles/common/common.css';

</style>

Answer 2

两种方式咯：

1. 第一种方式就是楼上说的，去掉style中的scoped，这样其他组件也能共用此组件的样式了，

<style>
  .home {
    min-width: 1221px;
  }
</style>

2.第二种方式就是在公共模块中新增一个公用样式文件，把所有公用样式都放到里面，比如新建base.css文件，然后全局引入base.css

base.css
  .home {
    min-width: 1221px;
  }

一般来说会选择第二种，单个组件不建议把scoped放开，不然往后维护会不小心删了这个组件那就出问题了，再有就是放开会这个组件的样式会覆盖其他组件的样式，不是很好。

Answer 3

放到外层组件里，style不要加上scoped

Answer 4

1是新增一个公共样式文件，需要用到的地方就引入；2是如果你使用css预处理器的话，可以使用mixin功能,非常棒，而且灵活，这也是用我个人挺喜欢的方式。