从node_modules导入的样式在Vercel失效（本地环境正常）

• 将Uppy样式移至全局导入
  多数框架（如Next.js）在生产构建阶段，组件内直接导入第三方CSS易出现路径解析异常。把Uppy的CSS导入语句迁移到全局样式入口文件（比如_app.js/_app.tsx或globals.css）中：

  // 在 _app.js 中
  import '@uppy/core/dist/style.css';
  import '@uppy/dashboard/dist/style.css';
  import '../styles/globals.css';
  
  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

• 确认依赖版本一致性
  本地与Vercel环境的Uppy依赖版本必须完全匹配。确保package-lock.json或yarn.lock已提交至代码仓库，避免Vercel安装不同版本依赖导致样式文件路径变更。

• 检查Vercel构建日志
  登录Vercel控制台查看项目构建日志，搜索CSS相关报错（如文件找不到、loader处理失败），可快速定位问题根源。

• 调整Webpack配置（若自定义配置）
  若项目使用自定义Webpack配置，需确保生产环境下正确配置mini-css-extract-plugin提取CSS文件，避免样式内联或路径错误：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ],
    },
    plugins: [new MiniCssExtractPlugin()],
  };
  

• 验证静态资源路径
  部署后查看页面源码，检查Uppy样式的引用路径是否正确（如是否缺少前缀、拼写错误）。若为Next.js项目，确认next.config.js中assetPrefix配置无误。

内容的提问来源于stack exchange，提问作者Primoz Rome