cad2020打印样式放在哪个文件夹_vue中引入elementUI,关于修改默认样式的几点总结...-CSDN博客

ElementUI的默认主题色是鲜艳、友好的蓝色，但是往往不能满足定制化的需求，我们在项目中，可能需要修改组件库默认的颜色，那么，该怎么操作呢？

首先，确定你的vue项目中有没有安装scss

项目中引入了scss时：

ElementUI的样式是使用scss编写的，所以主题色其实就是scss的一个变量，那么在你引入ElementUI样式之前，重新定义这个主题色变量就OK了

新建一个样式文件，例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";

之后，在项目的入口文件中，直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件)：

import Vue from 'vue'import Element from 'element-ui'import './element-variables.scss'Vue.use(Element)

注意点：

1)要在引入elementUI默认样式之前定义你的主题色

2)在.scss文件中引入elementUI样式文件，如果是相对路径，前面要加‘~’

项目中没有引入scss

项目中如果没有使用scss，那么新建.scss文件就会报错，这种情况想改变主题色，可以使用官方的在线主题生成工具，或者官方推荐的命令行工具。

工具会生成一个css的样式文件压缩包，将这个样式文件解压到一个叫做‘my-theme’的文件夹下，在main.js中引入这个样式文件中的index.css

修改某一个组件的样式

主题色修改了，但是对于某些页面的某些组件，我们不想使用主题颜色，该怎么操作呢？

我们可以建立一个文件夹，里面专门用来放覆盖原有样式的scss文件或者css文件。

如果使用scss，可以引入到element-variables.scss文件中覆盖。比如：建立这样一个文件夹，tree.scss文件中专门用来覆盖elementUI中树的样式

在element-variables.scss文件中引入，一定要放在elementUI默认样式引入之后

@import "~element-ui/packages/theme-chalk/src/index";@import "./customize/tree";

如果不想将样式用到所有的“树”，记着这你的覆盖样式之前加上class名的限定。

tree-container { .el-tree .is-current>.el-tree-node__content { background-color: rgb(15, 121, 253); }}

这样，只有在外层class为“.tree-container”下的树才会被改变默认样式。

如果使用css，要单独引入到main.js文件中,elementUI样式之后。

@import "element-ui/packages/theme-chalk/src/index";@import "./tree.css";

一定要注意：不要在加入“scope”标签的里写覆盖文件。