リーフレット：CSS-ローダー

Question

にエラーあなたはWebPACKの

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

を使用して、プロジェクト内リーフレット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');

以上の正しいだろうWebPACKの構成、中にそうするようにCSSローダーを変更する：あなたが、あなたのモジュール内で明示的にそう行うことができます。あなたのwebpack.config.jsにこれを追加します。

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

今、あなたはいつものようにあなたのJSにCSSのインポートを残すことができます：

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

もちろん、あなたがSTYLE-を持っていることを確認してくださいローダーとファイルローダーがインストールされている：

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