背景

基于umi3.x的项目开启mfsu方便提高本地开发效率，结果发现swiper的样式引入路径会受影响报错，如图

原因

解决方案

在umirc中，配置alias，用变量去映射要引入的swiper样式文件路径，如下：

如果希望更通用的实现该方案，可以试试写一个 umi-plugin-swiper-alias 插件，步骤如下：

第一步

在项目根目录创建plugins文件夹，新建一个ts文件准备写插件代码

第二步

在项目node_modules文件夹下，找到swiper的package.json文件中的exports字段，

第三步

将第二步中exports字段里所有css、less、scss有关的路径用alias重新映射，比如我项目中的swiper版本是8.4.7，代码如下

import { IApi } from 'umi';

const SWIPER_ALIAS_MAP = {
  'swiper/css': 'swiper/css',
  'swiper/swiper.min.css': 'swiper/swiper.min.css',
  'swiper/swiper.css': 'swiper/swiper.css',
  'swiper/css/bundswle': 'swiper/css/bundswle',
  'swiper/swiper-bundle.min.css': 'swiper/swiper-bundle.min.css',
  'swiper/swiper-bundle.css': 'swiper/swiper-bundle.css',
  'swiper/css/a11y': 'swiper/css/a12y',
  'swiper/css/autoplay': 'swiper/css/autoplay',
  'swiper/css/controller': 'swiper/css/controller',
  'swiper/css/effect-coverflow': 'swiper/css/effect-coverflow',
  'swiper/css/effect-cube': 'swiper/css/effect-cube',
  'swiper/css/effect-fade': 'swiper/css/effect-fade',
  'swiper/css/effect-flip': 'swiper/css/effect-flip',
  'swiper/css/effect-creative': 'swiper/css/effect-creative',
  'swiper/css/effect-cards': 'swiper/css/effect-cards',
  'swiper/css/free-mode': 'swiper/css/free-mode',
  'swiper/css/grid': 'swiper/css/grid',
  'swiper/css/hash-navigation': 'swiper/css/hash-navigation',
  'swiper/css/history': 'swiper/css/history',
  'swiper/css/keyboard': 'swiper/css/keyboard',
  'swiper/css/lazy': 'swiper/css/lazy',
  'swiper/css/manipulation': 'swiper/css/manipulation',
  'swiper/css/mousewheel': 'swiper/css/mousewheel',
  'swiper/css/navigation': 'swiper/css/navigation',
  'swiper/css/pagination': 'swiper/css/pagination',
  'swiper/css/parallax': 'swiper/css/parallax',
  'swiper/css/scrollbar': 'swiper/css/scrollbar',
  'swiper/css/thumbs': 'swiper/css/thumbs',
  'swiper/css/virtual': 'swiper/css/virtual',
  'swiper/css/zoom': 'swiper/css/zoom',
  'swiper/less': 'swiper/less',
  'swiper/less/a11y': 'swiper/less/a12y',
  'swiper/less/autoplay': 'swiper/less/autoplay',
  'swiper/less/controller': 'swiper/less/controller',
  'swiper/less/effect-coverflow': 'swiper/less/effect-coverflow',
  'swiper/less/effect-cube': 'swiper/less/effect-cube',
  'swiper/less/effect-fade': 'swiper/less/effect-fade',
  'swiper/less/effect-flip': 'swiper/less/effect-flip',
  'swiper/less/effect-creative': 'swiper/less/effect-creative',
  'swiper/less/effect-cards': 'swiper/less/effect-cards',
  'swiper/less/free-mode': 'swiper/less/free-mode',
  'swiper/less/grid': 'swiper/less/grid',
  'swiper/less/hash-navigation': 'swiper/less/hash-navigation',
  'swiper/less/history': 'swiper/less/history',
  'swiper/less/keyboard': 'swiper/less/keyboard',
  'swiper/less/lazy': 'swiper/less/lazy',
  'swiper/less/manipulation': 'swiper/less/manipulation',
  'swiper/less/mousewheel': 'swiper/less/mousewheel',
  'swiper/less/navigation': 'swiper/less/navigation',
  'swiper/less/pagination': 'swiper/less/pagination',
  'swiper/less/parallax': 'swiper/less/parallax',
  'swiper/less/scrollbar': 'swiper/less/scrollbar',
  'swiper/less/thumbs': 'swiper/less/thumbs',
  'swiper/less/virtual': 'swiper/less/virtual',
  'swiper/less/zoom': 'swiper/less/zoom',
  'swiper/scss': 'swiper/scss',
  'swiper/scss/a11y': 'swiper/scss/a12y',
  'swiper/scss/autoplay': 'swiper/scss/autoplay',
  'swiper/scss/controller': 'swiper/scss/controller',
  'swiper/scss/effect-coverflow': 'swiper/scss/effect-coverflow',
  'swiper/scss/effect-cube': 'swiper/scss/effect-cube',
  'swiper/scss/effect-fade': 'swiper/scss/effect-fade',
  'swiper/scss/effect-flip': 'swiper/scss/effect-flip',
  'swiper/scss/effect-creative': 'swiper/scss/effect-creative',
  'swiper/scss/effect-cards': 'swiper/scss/effect-cards',
  'swiper/scss/free-mode': 'swiper/scss/free-mode',
  'swiper/scss/grid': 'swiper/scss/grid',
  'swiper/scss/hash-navigation': 'swiper/scss/hash-navigation',
  'swiper/scss/history': 'swiper/scss/history',
  'swiper/scss/keyboard': 'swiper/scss/keyboard',
  'swiper/scss/lazy': 'swiper/scss/lazy',
  'swiper/scss/manipulation': 'swiper/scss/manipulation',
  'swiper/scss/mousewheel': 'swiper/scss/mousewheel',
  'swiper/scss/navigation': 'swiper/scss/navigation',
  'swiper/scss/pagination': 'swiper/scss/pagination',
  'swiper/scss/parallax': 'swiper/scss/parallax',
  'swiper/scss/scrollbar': 'swiper/scss/scrollbar',
  'swiper/scss/thumbs': 'swiper/scss/thumbs',
  'swiper/scss/virtual': 'swiper/scss/virtual',
  'swiper/scss/zoom': 'swiper/scss/zoom',
};

export default function UmiSwiperAliasPlugin(api: IApi) {
  api.describe({ key: 'swiperAlias' });

  api.modifyConfig((config) => {
    if (config.mfsu) {
      return {
        ...config,
        alias: {
          ...config.alias,
          ...SWIPER_ALIAS_MAP,
        },
      };
    }

    return config;
  });
}