怎么修改elementui的样式

ElementUI 的样式可以通过以下几种方式进行修改：

1. 在 main.js 中引入 element-ui 的样式文件，并自定义样式。

import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/element-ui-custom.css'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

2. 在 vue 组件中使用 scoped CSS 或 CSS Modules 进行样式覆盖。

<template>
  <div class="custom-element">
    <el-button>自定义按钮</el-button>
  </div>
</template>

<style scoped>
.custom-element {
  .el-button {
    background-color: #409EFF;
  }
}
</style>

3. 使用 sass 重写 element-ui 的样式。

首先，安装 sass-loader 和 node-sass。

npm install sass-loader node-sass --save-dev

然后，在 webpack 配置文件中添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                './node_modules/element-ui/packages/theme-chalk/src/common/var.scss',
                './node_modules/element-ui/packages/theme-chalk/src/common/mixins.scss'
              ]
            }
          }
        ]
      }
    ]
  }
}

最后，在 vue 组件中使用 sass 重写样式。

<template>
  <div class="custom-element">
    <el-button>自定义按钮</el-button>
  </div>
</template>

<style lang="scss">
@import "./assets/scss/element-ui-custom.scss";

.custom-element {
  .el-button {
    background-color: $primary-color;
  }
}
</style>