导入 CSS 样式表时反应库问题答案

【问题标题】：React library problem with importing CSS stylesheet导入 CSS 样式表时反应库问题
【发布时间】：2020-03-12 06:53:43
【问题描述】：

我正在使用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-marker-icon,

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

确保你有 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'],
      },
    ],
  },
};

【讨论】：

我没有 webpack.config.js 但我有 postcss.config.js 并且我安装了 style-loader 并在那里添加了这样的代码： module.exports = { plugins: [ require('autoprefixer ') ], module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, };
您必须将您的 post-css 配置指定给 webpack 以使 post-css 配置真正生效，如此处指定的 github.com/postcss/postcss-loader#usage ，尝试在根文件夹中创建 webpack.config.js 文件并按照文档。希望这会有所帮助。