React库问题与导入CSS样式表

Question

我正在使用https://github.com/0wczar/airframe-react，并且我想在那里实现带有react-leaflet库的地图。当我尝试导入导入“ leaflet / dist / leaflet.css”时；为我的地图设置样式时，出现如下错误：

ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0

模块解析失败：意外令牌（3：0） 您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders | / *所需样式* / |

  

.leaflet-pane，   | .leaflet-tile，   | .leaflet-marker-icon，

我应该怎么做才能解决这个问题？

Answer 1

请确保您将css-loader和style-loader作为您的开发依赖项，如果未使用npm install --save-dev style-loader安装它们，然后检查您的webpack配置，请将其添加到webpack.config.js中将会实现

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

Answer 2

我猜您正在使用webpack。如果是这样，则需要添加webpack loader来处理CSS文件的导入。

您应该可以使用css-loader解决当前的问题。