Codemirror 主题在 webpack 中不起作用答案

【问题标题】：Code Mirror themes is not working in web packCodemirror 主题在 webpack 中不起作用
【发布时间】：2018-10-16 04:58:45
【问题描述】：

实际上，在我的项目中，我需要使用代码镜像在突出显示的版本中显示代码 sn-p。但我面临一些问题。请检查以下信息。

技术背景：Typescript、webpack。

包Json：

 "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0"
  }

网页包配置文件

module: {
rules: [
    {
        test: /\.css$/,
        use: [
            require.resolve('style-loader'),
            {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    url: false
                },
            }
        ],
    },
]

实际上，css文件已加载，但没有应用代码镜像的主题

查看检查器模式

我在哪里犯了错误。

在我的 index.ts 文件中，我导入如下代码镜像

import * as CodeMirror from 'codemirror';

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css.js';

import './codemirror.css';
import  './gruvbox-dark.css';

然后在功能模块中，我使用下面的代码镜像插件传输了代码-sn-p。

myCodeMirror = CodeMirror(html element, {
            value: code-snippet content,
            lineNumbers: false,
            mode: 'text/html'
        });

【问题讨论】：

你能说明你是如何在你的应用程序中初始化 Codemirror 的吗？
@loveky，我修改了我的描述，初始化了代码镜像

标签： typescript webpack codemirror webpack-style-loader

【解决方案1】：

终于找到了解决办法，

为了在代码镜像中使用模式：'text/html'，我需要从节点模块导入以下文件。

导入'codemirror/mode/htmlmixed/htmlmixed.js';

【讨论】：

【解决方案2】：

首先，要使用text/html模式，你应该导入codemirror/mode/xml/xml

然后，在 codemirror 配置中，添加 theme 字段以启用您导入的主题。

theme: 'gruvbox-dark'

【讨论】：