webpackでReactアプリに "leaflet.css"を含めるにはどうすればいいですか？

Question

私はsurvivejs.comサイトをテンプレートとして使用して、webpackを使用したマップベースのReactアプリを構築しています。私はリーフレットを使用していますが、私はリーフレットを追加する方法を見つけることができません。これがなければマップタイルは間違った順序で表示されます。

私はこの

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

を使用してApp.jsxファイルにleaflet.cssを追加しようとしたが、私は私ができるのindex.htmlにアクセスした場合、次のエラー

ERROR in ./~/leaflet/dist/leaflet.css 
Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0) 
You may need an appropriate loader to handle this file type. 

を取得していますそこに追加してくださいが、私はwebpackと、私はこれを行う方法が不明ですか？

Answer 1

リーフレットで作業して、リーフレットをindex.htmlに追加すると、正常に動作しました。通常、JSXでCSSファイルを追加しないでください。すべてのスタイリングと外部の図書館はindex.htmlに追加されています。

私の場合、それはindex.jadeです。リーフレットとreactJSを使用したオープンストリートマップを実装しました。

Answer 2

Webpackはローダーの助けを借りずにCSSを解析できません。最も一般的に使用されるCSSローダーはwebpack/css-loaderです。

Lakshman Diwaakarの回答には、そのコンポーネントのJSX内のコンポーネント固有のCSSファイルをインポートすることは、そのコンポーネントの関連するすべてのコードを1か所にまとめておくことが非常に有益だと私は考えています。コンポーネントを削除すると、そのCSSはもはやビルドに含まれなくなります。私がコンポーネントを再利用したいのであれば、CSSはそこにあるべきです。

Answer 3

OKこれで私はJuhoVepsäläinenの助けを借りて生き残った。 HIsのアドバイスは

です。リーフレットCSSを見つけるには、リーフレット/ dist/leaflet.cssへのパスをウェブパックの設定に含めてください。あなたがその資料に従っているなら、おそらくスタイルパスの設定（PATHS.style）があります。 path.resolve（__ dirname、 'node_modules/leaflet/dist/leaflet.css'）に沿って何かをすることは、このトリックを行うべきです。

私は彼のアドバイスに従って、ファイルをwebpack.configするには、以下のコメントを追加しました：

style: [ 
    path.join(__dirname, 'app', 'main.css'), 
    path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css') 
], 

が、私も

module: { 
    loaders: [ 
    {test: /\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"} 
] 
}