如何將「leaflet.css」包含在帶有webpack的React應用程序中？

我使用survivejs.com網站作爲模板，用webpack構建了一個基於地圖的React應用程序。對於我使用傳單的地圖，但我找不到添加leaflet.css的方法。如果沒有，地圖圖塊將以錯誤的順序顯示。如何將「leaflet.css」包含在帶有webpack的React應用程序中？

我試圖用這個

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

但出現以下錯誤

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.

添加leaflet.css到App.jsx文件如果我訪問的index.html我可以添加它，但我與webpack，我不清楚如何做到這一點？

來源

2016-11-21 Eoin Lane

我已經與傳單一起工作，並將該傳單添加到index.html中正常工作。通常，您不要在JSX中添加CSS文件。所有樣式和外部圖書館都添加到index.html中。

在我的情況下，它是index.jade。使用傳單和reactJS實施開放街道地圖。

來源

2016-11-21 12:49:22

沒有來自加載程序的幫助，Webpack無法解析CSS。最常用的CSS加載器是webpack/css-loader。

我不同意Lakshman Diwaakar的回答，我認爲在該組件的JSX中導入組件特定的CSS文件是非常有益的，因爲它允許該組件的所有相關代碼都位於一個位置。如果我刪除組件，那麼該CSS不再是任何構建的一部分。如果我想重新使用一個組件，那麼CSS就在那裏與它一起使用。

來源

2016-11-21 14:36:05

好所以我從JuhoVepsäläinen那裏得到了生存者的幫助。您的建議是

要使它找到Leaflet CSS，您應該確保在webpack配置中包含傳單/ 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]"} 
] 
}

來源

2016-11-21 14:36:32

但爲什麼要補充PNG/jpg文件加載器，你需要一個css加載器{test：/\.css$/，loader：「style-loader！css-loader」}， –

我會以另一種方式使用css加載器建議什麼。 –

我想png/jpg加載器是因爲在CSS中有這些文件類型的引用，並且也希望webpack處理這些圖像。 –

如何將「leaflet.css」包含在帶有webpack的React應用程序中？

回答

相關問題