前端 - 同时使用elementPlus的自定义命名空间和自定义主题，打包报错Module loop: this module is already being loaded.？

Question

使用vue3+vite+scss+element-plus构建项目。
同时使用elementPlus的自定义命名空间和自定义主题，在打包的时候报错

代码如下：

// styles/element/theme.scss
$lb-namespace: 'lb';

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
    $namespace: $lb-namespace
);
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
        'primary': (
            'base': #3cd7da,
            'light-9': rgb(236 251 251 / 33%)
        ),
        'info': (
            'base': #16fcff
        )
    ),
    $bg-color: (
        '': #ffffff00,
        'overlay': #20577a
    ),
    $dialog: (
        'padding-primary': 12px
    ),
    $fill-color: (
        '': #344866,
        'light': #f5f7fa2b
    ),
    $text-color: (
        'primary': #16fcff,
        'regular': #16fcff,
        'secondary': #16fcff,
        // 'placeholder': darken(#16FCFF, 10%),
        // 'disabled': darken(#16fcff, 20%)
    ),
    $message: (
        'close-size': 30px
    ),
    $input: (
        'bg-color': #ffffff00
    )
);

// styles/element/light-blue.scss
@use './theme.scss' as *;
.#{$namespace}-dialog {
    background-size: cover;
    padding: 0;
    background-color: hsla(0, 0%, 100%, 0);

    .#{$namespace}-dialog__header {
        background-image: url('../../assets/images/dialog-header-bg.png');
        padding: map-get($map: $dialog, $key: padding-primary);
        background-size: unset;
        background-repeat: round;
    }

    .#{$namespace}-dialog__body {
        background: url('../../assets/images/dialog-body-bg.png') round;
        padding: 10px map-get($map: $dialog, $key: padding-primary);
        padding-bottom: 2px;
    }

    .#{$namespace}-dialog__footer {
        background: url('../../assets/images/dialog-footer-bg.png') round;
        padding: 3px map-get($map: $dialog, $key: padding-primary) map-get($map: $dialog, $key: padding-primary);
    }

    // footer带上分割线
    &.footer-top-line {
        .#{$namespace}-dialog__footer {
            border-top: 1px solid map-get($text-color, regular);
            padding-top: 10px;
        }
    }
}

在vite.config.ts中引入

css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    // 目前版本sass已抛弃@import命令，改用@use
                    additionalData: `
                        @use "@mb/styles/element/light-blue.scss" as *;
                    `,
                    api: 'modern-compiler'
                }
            }
        }

全局仅此处一个地方引入。
请问打包出现报错的原因是什么，如何修改。

希望打包时不再出现上述报错。
修改后如下所示。可以正常打包，但是样式失效。比如dialog
// main.ts

// css
import '@mb/styles/element/light-blue.scss'

// vite.config.ts

export default ({ mode }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            AutoImport({
                resolvers: [
                    ElementPlusResolver({
                        // 自动引入修改主题色添加这一行，使用预处理样式
                        // 不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
                        importStyle: 'sass'
                    })
                ],
                imports: ['vue', 'vue-router', 'vue-i18n', 'pinia'],
                dts: './types/auto-imports.d.ts',
                eslintrc: {
                    enabled: false,
                    // filepath: '.eslintrc-auto-import.json',
                    globalsPropValue: true
                }
            }),
            Components({
                resolvers: [
                    ElementPlusResolver({
                        // 按需引入修改主题色添加这一行，使用预处理样式
                        importStyle: 'sass'
                    })
                ],
                directoryAsNamespace: true,
                dts: './types/components.d.ts'
            }),
            ElementPlus({
                useSource: true
            })
        ],
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    // 目前版本sass已抛弃@import命令，改用@use
                    api: 'modern-compiler'
                }
            }
        }
    }
}

Answer 1

这个错误发生的主要原因是 SCSS 中的循环引用：

• 在 vite.config.ts 中，通过 additionalData 全局引入了 @mb/styles/element/light-blue.scss
• 然后在每个 SCSS 文件编译时，都会预先添加这段引用
• 当编译 light-blue.scss 本身时，它就会尝试引入自己，导致循环引用

我建议

• 从 vite.config.ts 中移除 additionalData 中引入 light-blue.scss 的代码
• 在 main.ts 中明确引入样式文件

首先，修改引入自定义样式的方式。在移除vite.config.ts中的additionalData后，需要确保样式被正确导入和优先级足够高。

// main.ts
// 确保自定义样式在Element Plus之前导入
import '@mb/styles/element/index.scss'; // 新增一个索引文件
// 然后再导入Element Plus组件库
import ElementPlus from 'element-plus';

styles/element/index.scss

// styles/element/index.scss
@use './theme.scss';
@use './light-blue.scss';
@use 'element-plus/theme-chalk/src/index.scss' as *;

修改 theme.scss 文件，尝试增加

// 导出命名空间以便其他文件使用
:export {
  namespace: $lb-namespace;
}

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: $lb-namespace
);

应用程序入口处配置Element Plus以使用自定义命名空间

app.use(ElementPlus, {
  // 指定命名空间
  namespace: 'lb'
});