样式

目录结构

Vue 前端项目的所有全局样式都在 src/styles 下设置。

├── styles
│   ├── btn.scss                 # 按钮样式
│   ├── element-ui.scss          # 全局自定义 element-ui 样式
│   ├── index.scss               # 全局通用样式
│   ├── mixin.scss               # 全局 mixin
│   ├── sidebar.scss             # sidebar css
│   ├── transition.scss          # vue transition 动画
│   └── variables.scss           # 全局变量

全局样式都写在 src/styles 目录下，每个页面对应的样式都写在自己的 .vue 文件中。

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

自定义 element-ui 样式

由于 element-ui 的样式是在全局引入的，所以若想在某个页面里覆盖它的样式就不能加 scoped，我们可以在它的父级加一个 class，用命名空间实现。

.article-page {
  /* 命名空间 */
  .el-tag {
    /* element-ui 元素 */
    margin-right: 0px;
  }
}

深度选择器

当子组件使用了 scoped，而父组件又要修改子组件的样式时，可以通过 >>> 来实现。

<style scoped>
  .a >>> .b { /* ... */ }
</style>

会编译成

.a[data-v-f3f3eg9] .b {
  /* ... */
}

如果我们使用预处理 sass，可以通过 /deep/ 代替 >>> 实现想要的效果。

覆盖某个特定页面 element 的 button 的样式示例。

PostCSS

新版 vue-cli webpack 模板 init 之后根目录下默认有一个 postcss.config.js。vue-loader 的 postcss 默认读取这个文件里的配置项，所以在这里直接改配置文件就可以了。配置和 postcss 是一样的。

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}
// package.json
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

上面代码所述，autoprefixer 读取 package.json 里 browserslist 的配置参数

• 1%：兼容全球使用率大于1%的浏览器

• last 2 versions：兼容每个浏览器的最近两个版本

• not ie <= 8：不兼容 ie8 及以下

Mixin

Vue 前端项目没有设置自动注入 sass 的 mixin 到全局，所以需要在使用的地方手动引入 mixin

<style rel="stylesheet/scss" >
  @import "src/styles/mixin.scss";
</style>

若需自动将 mixin 注入到全局 ，可以使用 sass-resources-loader。