vue3使用sass修改element plus样式

Vue3 项目中使用 Sass 修改 Element Plus 的样式通常需要以下几个步骤：

1. 安装依赖：首先确保已安装 Node.js 和 npm 或 yarn。然后在项目根目录运行命令来安装 `sass` 和用于处理 Vue 组件样式的工具，如 `@vue/cli-plugin-sass` 或者 `node-sass`。

   // 使用 npm
   npm install -D node-sass sass-loader @vue/cli-plugin-sass

   // 使用 yarn
   yarn add --dev node-sass sass-loader @vue/cli-plugin-sass

2. 配置 .babelrc 或者 vue.config.js：如果使用 `@vue/cli`，配置文件中应包含对 Sass 支持的设置。在 `.babelrc` 中添加：

   {
     "plugins": [
       "@vue/babel-plugin-sass"
     ]
   }

或者在 `vue.config.js` 中：

   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           loader: 'css-loader!sass-loader',
         },
       },
     },
   };

3. 创建样式文件：在 `src/styles` 目录下创建一个新的 `.scss` 文件，并导入 Element Plus 的全局样式。例如：

   // src/styles/global.scss
   @import '~element-plus/lib/theme-chalk/index.scss';
   // 这里可以开始自定义样式
   $my-custom-color: #ff0000;
   button {
     color: $my-custom-color;
   }

4. 引入样式：在组件的 `<style>` 标签中，使用 `lang="scss"` 指定语言：

   <template>
     <!-- ... -->
   </template>

   <script setup></script>
   
   <style lang="scss" scoped>
     @import "./global.scss";
   </style>

5. 热更新：在开发环境中，Vue CLI 会自动处理 Sass 的热更新。但在生产环境构建时，你需要将 Sass 转换为 CSS，可以使用 `npm run build` 或 `yarn build` 命令。

现在，你可以根据需要自定义 Element Plus 的样式了。