Webpack的传单: css-loader中的错误

Question

如果您正在尝试使用Webpack在项目中导入Leaflet CSS

require('leaflet/dist/leaflet.css');

并出现以下错误：

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/leaflet/dist/leaflet.css Module not found: Error: Can't resolve 'url-loader' in '[your-project-folder]' @ ./~/css-loader!./~/sass-loader/lib/loader.js!./~/leaflet/dist/leaflet.css 2:7454-7484 @ ./~/leaflet/dist/leaflet.css @ ./src/components/LeafletMap/LeafletMap.js @ ./src/components/App/App.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.js

Answer 1

您需要正确使用style-loader。您可以在模块中显式地执行此操作，方法如下：

require('style-loader/url!file-loader!leaflet/dist/leaflet.css');

或者将CSS加载器更改为在webpack配置中执行此操作，这样会更正确。将以下内容添加到您的webpack.config.js：

module: { rules: [ { test: /\.css$/, loader: 'style-loader/url!file-loader' }, (...) ] }

现在，您可以像往常一样将CSS导入保留在JS中：

require('leaflet/dist/leaflet.css');

当然，请确保安装了style-loader和file-loader：

npm install --save-dev style-loader file-loader