使用Parcel从node_modules导入CSS到React模块时类名显示undefined

你遇到的问题核心在于全局启用了CSS Modules，而像Bootstrap这类第三方库的CSS是基于全局类名设计的，并非为CSS Modules编写的，所以PostCSS无法从这类文件中解析出对应的模块化导出，自然styles.row就会是undefined。

解决方案：区分本地CSS与第三方CSS的处理规则 #

你需要修改PostCSS配置，只对自己项目中的本地CSS/SCSS文件启用CSS Modules，对node_modules里的文件保持普通CSS的处理方式。具体步骤如下：

1. 把你的.postcssrc文件改成.postcssrc.js（因为JSON格式无法编写条件逻辑），然后写入以下配置：

module.exports = (ctx) => {
  // 判断当前处理的文件是否在node_modules外
  const isLocalStyleFile = !ctx.file.dirname.includes('node_modules');
  
  return {
    plugins: {
      autoprefixer: {
        grid: true,
      },
      // 只对本地文件启用CSS Modules
      ...(isLocalStyleFile ? {
        'postcss-modules': {
          camelCase: true,
          generateScopedName: '[local]_[hash:base64:5]' // 和你之前的类名生成规则保持一致
        }
      } : {})
    }
  };
};

2. 调整第三方CSS的导入方式：
   对于Bootstrap这类全局CSS，不需要用模块化导入，直接全局引入即可：

import 'bootstrap/dist/css/bootstrap.css';

然后在组件中直接使用全局类名：

<div className="row">A text</div>

而你自己的本地组件样式，依然可以保持原来的模块化导入方式：

import * as styles from './my-component.css';
// ...
<div className={`${styles.glory}`}>A text</div>

为什么之前的配置不行？ #

你原来的.postcssrc中全局设置了"modules": true，这会让PostCSS尝试把所有CSS文件（包括node_modules里的）都当作CSS Modules处理。但Bootstrap的CSS没有定义模块化的导出，所以生成的styles对象中不会包含row这类全局类名的属性，最终渲染时就变成了undefined。

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