vue style样式中@import和/deep/几点说明

import

在main.js中import全局引入的css、less、scss等样式文件，全局覆盖，代码如下：

import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss'

如果对于引入的框架的样式想要做全局替换可以写在index.scss，例如

第一张图为element-ui默认table表头的样式，如果想改成下面的样式，可以在index.scss
中写如下代码

.el-table td,
.el-table th.is-leaf {
  text-align: center;
}
.el-table th.is-leaf{
  background: #f5f7fa;
  color: #333;
}

如果只是想修改某个组件的样式，可以直接写在组件样式中，如果是想抽离公共的样式文件，在特定组件引用则可利用以下方式：

@import "style.css";
@import url("style.css");

这2中语法应该是没什么区别，但是个人在实际使用中发现使用上面一种情况有时会报模块找不到的情况,但是相同的路径用下面这种就会引用成功，至于为什么个人目前也不知道。
这里要特别说明的一点就是，引入的时候要直接引入在样式的最上面，即

<style type="text/css">
  @import "import.css";
  .hd{
    color: orange;
  }
</style>
...
<p class="hd">我是什么颜色</p>

/deep/

如果想改变框架组件的内部样式文件，如果在样式中加了scoped中的，可以在要修改的样式类名前面加/deep/，例如：

/deep/.el-dialog__footer {
  border-top: none; 
  padding: 10px 20px 20px
}