动态路由，生成路由组件相关bug

问题描述：想动态引入组件，结果报 scss 循环引用错误

报错信息如下：

// component
// router_obj.component = require(`@/${item.menu_component}`).default;

// 上一行解注错误信息如下
// 错误信息如下
// Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
// SassError: This file is already being loaded.
//   ╷
// 3 │ @import "./elementUI.scss"; // 全局样式
//   │         ^^^^^^^^^^^^^^^^^^
//   ╵
//   src\styles\main.scss 3:9       @import
//   src\styles\elementUI.scss 1:9  root stylesheet

解决方案：

1. 取消 vue.config.js 内 css 的配置

 css: {
    loaderOptions: {
      scss: {
        // 整个项目的样式文件主入口，将main.scss 文件加载到项目中，便可供全局使用
        // additionalData: `@import "./src/styles/main.scss";`,
      },
    },
  }

2. 转为在 main.js 内引入

import "./styles/reset-custom.scss"; // 重置样式
import "@/styles/main.scss"; // 引入全局样式

3. main.scss

@import "element-plus/dist/index.css"; // 组件库样式
// @import "./sassConfig.scss"; // 取消定义变量 的scss文件
@import "./elementUI.scss"; // 全局样式

.pull-right {
  float: right;
}

.margin-top-30 {
  margin-top: 30px;
}

4. 改为哪个页面使用变量，在哪个页面单独引入 sassConfig.scss

例如：

<style lang="scss" scoped>
@import "@/styles/sassConfig.scss"; // 引入
#main-content {
  background-color: #fff;
  padding: 20px;
  min-height: 100%;
  @include webkit(box-sizing, border-box);
}
</style>