./node_modules/leaflet/dist/leaflet.css 3：0中的错误>您可能需要适当的加载程序来处理此文件类型

Question

我正在使用react-leaflet进行项目，并在构建时遇到此错误：

    ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0
    Module parse failed: Unexpected token (3: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
    | /* required styles */
    | 
    > .leaflet-pane,
    | .leaflet-tile,
    | .leaflet-marker-icon,
ℹ ｢wdm｣: Failed to compile.

由于像这样将leaflet.css导入到我的项目后，此错误开始出现：

import 'leaflet/dist/leaflet.css';

我在此文件中的所有导入均为：

import React, { PureComponent } from 'react';
import { LatLngExpression } from "leaflet";
import { Map, TileLayer, Marker, Popup, ZoomControl, ScaleControl, Viewport } from 'react-leaflet';
import { Classes } from "jss";

import 'leaflet/dist/leaflet.css';

为了解决这个问题，我在项目中添加了css-loader，file-loader和style-loader（使用yarn）。之后，我将webpack配置更改为：

module: {
  rules: [{
    test: /\.(png|svg|jpg|gif)$/,
    use: [{
      loader: 'file-loader'
    }]
  }, {
    test: /\.css$/i,
    use: [{
      loader: 'style-loader'
    },{ 
      loader: 'css-loader',
      options: {
        url: false, 
        modules: false
      }
    }]
  }]
}

但是我在构建时仍然遇到相同的错误。我尝试了几种解决方案，例如尝试添加url-loader。

不知何故，我一直收到相同的错误。

为了完整，我正在使用：

    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-leaflet": "2.7.0",
    "leaflet": "1.6.0",
    "@babel/core": "7.9.6",
    "babel-loader": "8.1.0",
    "css-loader": "3.5.3",
    "file-loader": "6.0.0",
    "style-loader": "1.2.1",
    "webpack": "4.43.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.10.3"

提前感谢您的帮助。

Answer 1

您尝试将CS​​S文件作为JS模块加载。

此行是问题：import 'leaflet/dist/leaflet.css';

改为尝试：import leaflet from 'leaflet'