时间戳

首页 > 解决方案 > 我在 Webpack 中收到 .css 模块解析失败错误，即使我已经在 module.rules 中有一个 css-loader

webpack - 我在 Webpack 中收到 .css 模块解析失败错误，即使我已经在 module.rules 中有一个 css-loader

问题描述

我正在使用 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，所以我很困惑这里似乎是什么问题。我已经尝试过的一些事情：

关于发生了什么，我最好的猜测是我对 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()],
};

标签： webpackelectronmonaco-editorcss-loader

解决方案

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

推荐阅读