NextJS + CKEditor5 与 CodeBlock 插件失败（全局 CSS 导入错误）

Question

我正在尝试在 NextJS 中使用 CKEditor5。这是我的软件包版本：

"@ckeditor/ckeditor5-build-classic": "^22.0.0",
"@ckeditor/ckeditor5-code-block": "^22.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",
"next": "9.5.1",

我的组件的相关部分是：

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

const editorConfig = {
  toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'codeBlock'],
  plugins: [CodeBlock],
  codeBlock: {
    languages: [
      { language: 'plaintext', label: 'Plain text' },
      { language: 'c', label: 'C' },
      { language: 'cs', label: 'C#' },
      { language: 'cpp', label: 'C++' },
      { language: 'css', label: 'CSS' },
      { language: 'diff', label: 'Diff' },
      { language: 'html', label: 'HTML' },
      { language: 'java', label: 'Java' },
      { language: 'javascript', label: 'JavaScript' },
      { language: 'php', label: 'PHP' },
      { language: 'python', label: 'Python' },
      { language: 'ruby', label: 'Ruby' },
      { language: 'typescript', label: 'TypeScript' },
      { language: 'xml', label: 'XML' }
    ]
  }
};

export default function AddForm() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={editorConfig}
    />
  )
}

我收到以下错误。

./node_modules/@ckeditor/ckeditor5-code-block/theme/codeblock.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@ckeditor/ckeditor5-code-block/src/codeblockui.js

正如我所见，CKEditor CodeBlock 插件试图在包中导入全局 CSS。下面是 codeblockui.js 中 node_modules 包中的一个示例：

import '../theme/codeblock.css';

我该如何解决这个问题？

Answer 1

既然你正在使用NextJs，你就必须考虑NextJs css import rules。

如果你想在组件（模块）中导入 css 文件，css 文件名必须类似于[any name].module.css.

如何导入：

import styles from './index.module.css';

如何使用：

<div className={`${styles.class1} ${styles.class2}`}>

如果您的 css 文件与命名规则不匹配，则会出现错误。

您也可以以正常方式导入任何名称的 css 文件_app.js。