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

最新推荐文章于 2022-05-17 15:41:16 发布

原创最新推荐文章于 2022-05-17 15:41:16 发布 · 736 阅读

CC 4.0 BY-SA版权

7 篇文章

订阅专栏

博客介绍了在main.js中全局引入css、less、scss等样式文件的方法，可全局覆盖。对于框架样式的全局替换可写在index.scss，修改特定组件样式可写在组件样式中或抽离公共样式文件引用。还提到改变框架组件内部样式，在有scoped时的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>

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

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