React项目中导入Codemirror样式文件失败的问题求助

错误原因 #

你当前使用的是Codemirror v6版本，该版本重构了包结构，并通过package.json的exports字段限制了仅能导入指定路径。旧的v5版本导入路径（./lib/codemirror.css、./theme/material.css）在v6中不存在，也未被导出，因此触发模块找不到的错误。

解决方案 #

方案一：降级到Codemirror v5（适配旧代码） #

如果你的项目依赖v5的API和导入方式，直接降级即可：

• 卸载当前版本：

  npm uninstall codemirror
  

• 安装v5稳定版：

  npm install codemirror@5
  

• 降级后，你原来的导入代码可以正常使用：

  import 'codemirror/lib/codemirror.css';
  import 'codemirror/theme/material.css';
  

方案二：适配Codemirror v6新结构（推荐新项目使用） #

v6采用模块化设计，样式和主题需要从对应子包导入：

1. 安装必要依赖包：

   npm install @codemirror/view @codemirror/theme-material
   

2. 修改样式导入代码：

   // 导入编辑器基础样式
   import '@codemirror/view/style.css';
   // 导入Material主题样式
   import '@codemirror/theme-material/material.css';
   

3. 在编辑器配置中启用主题（v6需显式配置）：

   import { EditorState } from '@codemirror/state';
   import { EditorView, lineNumbers } from '@codemirror/view';
   import { material } from '@codemirror/theme-material';
   
   const editorView = new EditorView({
     state: EditorState.create({
       doc: '你的代码内容',
       extensions: [
         lineNumbers(),
         material // 启用Material主题
       ]
     }),
     parent: document.getElementById('editor-container')
   });
   

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