vue scss修改 element plus el-menu组件的.el-menu--horizontal样式

Vue 和 SCSS 结合使用时，如果你想修改 Element Plus 中的 `.el-menu--horizontal` 样式，首先你需要做到以下几点：

1. **安装依赖**：确保你在项目中已经安装了 Vue CLI 和 SCSS 预处理器。如果还没有，可以运行 `npm install -D node-sass sass-loader vue-cli-plugin-vuex` 或者 `yarn add node-sass sass-loader vue-cli-plugin-vuex`。

2. **配置 SCSS**：在 `vue.config.js` 文件中添加 SCSS 的配置，例如：

   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           data: `
             @import "~element-plus/lib/theme-chalk/index.scss";
           `,
         },
       },
     },
   };

3. **创建主题文件**：在 `src/assets/scss` 目录下（假设存在），创建一个新的 SCSS 文件，比如 `custom-theme.scss`，然后针对 `.el-menu--horizontal` 类编写自定义样式：

   // custom-theme.scss
   .el-menu--horizontal {
     /* 这里添加你想要修改的样式 */
     background-color: #your-color;
     color: #your-text-color;
     /* 可能需要调整的其他属性 */
   }

4. **应用新主题**：在需要应用这个主题的地方，如 App.vue 或者某个具体的组件中，导入并使用自定义主题：

   <style scoped>
     @import './assets/scss/custom-theme.scss';
   </style>

5. **刷新样式**：保存更改后，通过刷新浏览器或者使用 `npm run serve` 或 `yarn dev` 来看到更新后的效果。

记得检查是否覆盖了 Element Plus 自带的主题，以免影响其他功能。如果你有特殊需求，也可以考虑使用 CSS Modules 或者 Less 等其他预处理器。