即使我在 module.rules

问题描述

我正在用 Electron 和 React 构建我的应用程序，并希望我的应用程序显示 Monaco editor。我目前正在构建我的 React Webpack。我的应用程序为 React 和 Electron 提供了单独的 Webpack 文件。 Webpack 的新手！

我的 monaco-editor Node 模块中的所有 .css 文件都出现以下错误。

ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/ui/findinput/findInput.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我已经在我的 webpack.react.config.js 文件中包含了一个 css-loader 和 style-loader，所以我很困惑这里似乎是什么问题。 我已经尝试过的一些事情：

• 我已经指定我的 css-loader 应该专门用于我的 monaco-editor 包，但我不知道这是否会是一个大问题，因为该应用目前没有任何单独的样式。
• 我已尝试查看 css 和其他列出的文件的加载程序顺序，但我认为那里没有问题。除非有人能以其他方式向我指出！

我对正在发生的事情的最佳猜测是我缺乏关于 Webpack 加载器的知识，我认为我在那里做错了。一直在深入研究 Webpack 文档，但仍然很卡。

我的 webpack.react.config.js 文件

---

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const MONACO_DIR = path.resolve(__dirname,'./node_modules/monaco-editor');
// Monaco Editor uses CSS imports internally,// so we need a separate css-loader for app and monaco-editor packages

module.exports = {
  resolve: {
    extensions: ['.tsx','.ts','.js','.jsx','.css'],mainFields: ['main','module','browser'],},entry: './src/index.js',target: 'electron-renderer',devtool: 'source-map',module: {
    rules: [
      {
        test: /\css$/i,include: MONACO_DIR,use: ['style-loader','css-loader'],{
        test: /\.(js|ts|tsx|jsx)$/,exclude: /node_modules/,use: ['babel-loader'],],devServer: {
    contentBase: path.join(__dirname,'../dist/renderer'),historyApiFallback: true,compress: true,hot: true,port: 4000,publicPath: '/',output: {
    path: path.resolve(__dirname,'dist'),filename: 'js/[name].js',plugins: [new HtmlWebpackPlugin(),new MonacoWebpackPlugin()],};

解决方法

哇...这是因为我没有将 style-loader 安装为 devDependency。面掌。