AWS Amplify UI React 样式无法从node_modules导入问题求助

以下是可直接落地的修复步骤：

• 首先确认样式导入路径是否正确，2.1.0版本的标准导入写法为：

  import '@aws-amplify/ui-react/styles.css';
  

  不要使用旧版@aws-amplify/ui下的样式路径，该路径在2.x版本已经完成调整。
• 检查前端构建工具的css解析配置：
  如果你使用自定义配置的webpack，需要确保css loader没有将@aws-amplify相关依赖排除在解析范围外，参考配置如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          // 仅排除除aws-amplify外的其他node_modules依赖css
          exclude: /node_modules\/(?!@aws-amplify)/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }
  

  若使用vite、create-react-app等默认支持node_modules css导入的工具，可跳过此步。
• 排查导入顺序问题：请将amplify样式的导入语句放在你自己项目的全局自定义样式之前，避免自定义样式覆盖组件默认样式。
• TypeScript项目额外校验：如果你的项目开启了css模块类型检测，可在全局声明文件（如src/global.d.ts）中添加以下声明，避免类型报错：

  declare module '*.css';
  

• 若以上步骤都无效，可清理缓存重装依赖：

  # 清理旧依赖与缓存
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装依赖
  npm install
  # 或使用yarn
  yarn install
  

内容的提问来源于stack exchange，提问作者Rafael Hernandez