通过修改sass变量、class,全局修改element-ui样式。
1.安装sass
- 查看自己的 node 版本
node -v
2.判断情况
当 node 版本低于 14 时,安装以下两个版本,
“node-sass”: “4.14.0”,
“sass-loader”: “7.1.0”
当 node 版本为16x 时,安装以下两个版本
“node-sass”: “6.0.1”,
“sass-loader”: “10.2.0”
2.新建一个样式文件
例如 element-variables.scss,写入以下内容:
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
3.找到样式文件
node_nodules/element-ui/packages/theme-chalk/src/common/var.scss
找到需要修改的样式,复制到element-variables.scss中。
修改scss变量:
/* 改变主题色变量 */
$--color-primary: red;
/*改变button*/
$--button-font-size:64px;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
4.import scss文件
在main.js中import ‘./styles/element-variables.scss’;
5.按需引入
main.js:
import Vue from 'vue'
import App from './App.vue'
import Button from 'element-ui/lib/button';
import './styles/element-variables.scss';
Vue.use(Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
element-variables.scss:
/* 改变主题色变量 */
$--color-primary: red;
/*改变button*/
$--button-font-size:64px;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/button";
babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
// [
// "component",
// {
// "libraryName": "element-ui",
// "styleLibraryName": "theme-chalk"
// }
// ]
]
}
如果有修改scss变量无法修改的样式
推荐使用组件化
可以直接覆盖element的class
.el-card{
&__header {
padding: 5px 10px;
}
}
/* 改变主题色变量 */
$--color-primary: red;
/*改变button*/
$--button-font-size:64px;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/card";
@import "./components/el-card.scss"
*/deep/
亲测有效,记录一下,经常遇到这个问题。
作用:
当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器.