admin管理员组文章数量:1296332
When trying using Monaco Editor in case of using Webpack, codicons are not loaded. I used the monaco-editor-webpack-plugin and followed the instruction, but currently I can't any icons on the Monaco Editor instance in my test page.
Did I forget something to load the codicons?
You can reproduce this issue with:
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/**/*'],
},
};
When trying using Monaco Editor in case of using Webpack, codicons are not loaded. I used the monaco-editor-webpack-plugin and followed the instruction, but currently I can't any icons on the Monaco Editor instance in my test page.
Did I forget something to load the codicons?
You can reproduce this issue with: https://github./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/**/*'],
},
};
4 Answers
Reset to default 8Since Webpack 5, we need to use Asset Modules instead of loaders.
That is, the following code works on Webpack 5:
{
test: /\.ttf$/,
type: 'asset/resource'
}
If using Webpack 4 and lower, the following code will work:
{
test: /\.ttf$/,
use: ['file-loader']
}
I had a similar issue as of Aug 2023. Following this thread fixed the issue for me.
Namely, downgrading css-loader to ^5.2.7.
I also followed the answer to this post, since i'm using webpack5.
{
test: /\.ttf$/,
type: 'asset/resource'
}
Mihai's answer was the solution for me. I have installed monaco in a mirrored web page, and just had to correct codicon as described by Mihai.
[class^="codicon-"], [class*="codicon-"] {
font-family: "codicon"!important;
}
The css inserted by monaco for elements that have codicon font icons have by default font-family: inherit;.
.codicon-find-previous-match:before {
content: '\eaa1';
}
Unless you have provided some custom icon font for codicon codes make sure you have a CSS rule that specifies the font-family provided by monaco-editor:
[class^="codicon-"], [class*="codicon-"] {
font-family: "codicon"!important;
}
本文标签： javascriptMonaco Editor doesn39t load codicons in case of using WebpackStack Overflow
版权声明：本文标题：javascript - Monaco Editor doesn't load codicons in case of using Webpack - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741604795a2387911.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论