Rollup配置fomantic-ui-less别名时theme.config导入解析失败如何解决

• @rollup/plugin-alias 只处理Rollup主编译流程里的JS/TS模块导入，完全不会介入rollup-plugin-postcss内部对Less @import语句的解析逻辑，你配置的别名规则对Less文件里的导入根本不生效。
• Webpack的resolve.alias是全局生效的，所有loader处理资源时都会走别名解析，所以Storybook里的同名配置可以正常工作，调整Rollup插件顺序没用的核心原因就是两个插件的作用范围完全不重叠。

直接在rollup-plugin-postcss的配置里处理Less导入路径，不用靠全局alias插件，两种可直接落地的方案选一个即可：

方案1：通过postcss-import重写路径（配置最简单） #

先确保已经安装postcss-import依赖，然后修改postcss配置：

// rollup.config.js
import path from 'path'
// 其他导入...

export default {
  // 其他Rollup配置项...
  plugins: [
    // 其他插件...
    alias({
      entries: [/* 这里只保留JS/TS相关的别名配置即可 */]
    }),
    postcss({
      extract: true, // 需要抽离独立CSS文件就开启
      modules: false, // Fomantic-UI是全局样式，不要开CSS Modules
      plugins: [
        require('postcss-import')({
          resolve: (importId) => {
            // 命中目标导入直接返回本地theme.config的绝对路径
            if (importId === '../../theme.config') {
              return path.join(__dirname, 'themes/theme.config')
            }
            return importId
          }
        }),
        // 其他需要的postcss插件，比如autoprefixer、cssnano等
      ],
      use: ['less'] // 声明使用less处理.less文件
    })
    // 其他插件...
  ]
}

方案2：通过Less官方插件重写路径（不需要额外依赖） #

如果不想加额外的postcss插件，可以直接给less传自定义文件解析插件，100%命中目标导入：

postcss({
  extract: true,
  modules: false,
  use: [
    ['less', {
      lessOptions: {
        relativeUrls: false,
        plugins: [
          {
            install(less, pluginManager) {
              pluginManager.addFileManager({
                supports: () => true,
                supportsSync: () => true,
                loadFile: async (filePath) => {
                  let resolvedPath = filePath
                  if (filePath.includes('../../theme.config')) {
                    resolvedPath = path.join(__dirname, 'themes/theme.config')
                  }
                  return less.FileManager.prototype.loadFile.call(this, resolvedPath)
                },
                loadFileSync: (filePath) => {
                  let resolvedPath = filePath
                  if (filePath.includes('../../theme.config')) {
                    resolvedPath = path.join(__dirname, 'themes/theme.config')
                  }
                  return less.FileManager.prototype.loadFileSync.call(this, resolvedPath)
                }
              })
            }
          }
        ]
      }
    }]
  ]
})

注意：配置完成后记得清空Rollup缓存再重新执行构建，避免旧缓存导致配置不生效。

内容的提问来源于stack exchange，提问作者Sami Khan