monaco-editor ESM文件含CSS导入语句引发浏览器MIME类型错误求助

为什么monaco-editor会有import '*.css'语句？ #

这类导入是现代前端库的常见写法，目的是让打包工具（如Webpack、Vite）自动识别样式依赖，在构建时将CSS提取或注入到页面，确保组件样式和代码的依赖关系一致，避免手动引入样式时遗漏或顺序错误。

解决方案 #

方案1：使用打包工具构建项目（推荐） #

如果你的项目用Vite、Webpack等构建工具，只需确保配置正确，工具会自动处理ESM中的CSS导入：

• Vite：原生支持ESM导入CSS，无需额外配置，打包时会自动将样式注入到页面。
• Webpack：安装css-loader和style-loader（或mini-css-extract-plugin），在webpack配置文件中添加规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
  };
  

  构建后，CSS会被正确处理，不会在浏览器中触发MIME错误。

方案2：直接在浏览器中使用（无打包工具） #

如果是直接在浏览器中引入monaco-editor的ESM文件，需要手动处理样式：

1. 手动引入CSS文件：找到monaco-editor包中对应的CSS文件（比如node_modules/monaco-editor/esm/vs/editor/editor.main.css），在HTML中用<link>标签引入：

   <link rel="stylesheet" href="./node_modules/monaco-editor/esm/vs/editor/editor.main.css">
   

2. 移除ESM中的CSS导入：删除或注释掉monaco-editor ESM文件里的import '*.css'语句，避免浏览器尝试把CSS当作JS模块加载。
3. 使用官方loader脚本：更稳妥的方式是用monaco-editor官方提供的loader，它会自动加载所需资源：

   <script>
     require.config({ paths: { 'vs': './node_modules/monaco-editor/min/vs' } });
     require(['vs/editor/editor.main'], function() {
       // 初始化编辑器
       monaco.editor.create(document.getElementById('container'), {
         value: 'console.log("Hello World");',
         language: 'javascript'
       });
     });
   </script>
   <link rel="stylesheet" href="./node_modules/monaco-editor/min/vs/editor/editor.main.css">
   

方案3：不推荐的服务器端修改 #

不要尝试修改服务器返回的CSS文件MIME类型为application/javascript，这违反HTML规范，会引发其他样式加载问题，属于饮鸩止渴的做法。

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