Monaco Editor 在使用 Webpack 时不会加载代码图标

Question

在使用 Webpack 的情况下尝试使用 Monaco Editor 时，不会加载代码图标。我使用了 monaco-editor-webpack-plugin 并遵循了说明，但目前我在测试页面中的 Monaco Editor 实例上看不到任何图标。

我忘记加载代码了吗？

您可以通过以下方式重现此问题：https://github.com/yoichiro/monaco-editor-test/tree/main

index.html

<!doctype html>
<html lang="en">
<head>
  <style>
    .source-editor {
                width: 640px;
                height: 320px;
        }
  </style>
</head>
<body>
  <div class="source-editor"></div>
</body>
</html>

index.ts

import * as monaco from 'monaco-editor';

window.addEventListener('load', () => {
        monaco.editor.create(document.querySelector('.source-editor'));
});

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
      {
        test: /\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                outputStyle: 'expanded',
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.ttf$/,
        use: ['file-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js', 'scss', 'html'],
  },
  plugins: [
    new MonacoEditorWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
  devtool: 'source-map',
  watchOptions: {
    ignored: /node_modules/,
  },
  devServer: {
    static: './build',
    // open: true,
    watchFiles: ['src/**/*'],
  },
};

Answer 1

从 Webpack 5 开始，我们需要使用 Asset Modules 而不是加载器。

也就是说，以下代码适用于 Webpack 5：

{
  test: /\.ttf$/,
  type: 'asset/resource'
}

如果使用 Webpack 4 及更低版本，以下代码将起作用：

{
  test: /\.ttf$/,
  use: ['file-loader']
}

Answer 2

截至 2023 年 8 月，我遇到了类似的问题。按照此线程解决了我的问题。

即，将

css-loader

降级为

^5.2.7

。

我也遵循了这篇文章的答案，因为我正在使用 webpack5。

{
  test: /\.ttf$/,
  type: 'asset/resource'
}

Answer 3

摩纳哥为具有 codicon 字体图标的元素插入的 css 默认情况下具有

font-family: inherit;

。

.codicon-find-previous-match:before {
    content: '\eaa1';
}

除非您为 codicon 代码提供了一些自定义图标字体，否则请确保您有一个 CSS 规则来指定 monaco-editor 提供的字体系列：

 [class^="codicon-"], [class*="codicon-"] {
        font-family: "codicon"!important;
 }

Monaco Editor 在使用 Webpack 时不会加载代码图标

问题描述投票：0回答：3

3个回答

最新问题

Monaco Editor 在使用 Webpack 时不会加载代码图标

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3