Как включить «leaflet.css» в приложение React с веб-пакетом?

Question

Я использую сайт survivejs.com в качестве шаблона для создания приложения React с картой с веб-пакетом. Для карты я использую листовки, но я не могу найти способ добавить leaflet.css. Без этого фрагменты карты отображаются в неправильном порядке.

Я попытался добавить leaflet.css в файл App.jsx с помощью этого

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. 

Если бы я имел доступ к index.html я мог добавьте его там, но я с webpack, я не понимаю, как это сделать?

Answer 1

Я работал с листовкой и добавлял листовку к index.html, работая правильно. Как правило, вы не добавляете файлы CSS в JSX. Все стили и внешние библиотеки добавляются в index.html.

В моем случае это index.jade. Реализована карта открытых улиц с помощью листовки и реакций.

Answer 2

Webpack не может разобрать CSS без помощи загрузчика. Наиболее часто используемый загрузчик CSS - webpack/css-loader.

Я не согласен с ответом от Lakshman Diwaakar, в котором я считаю чрезвычайно полезным импортировать специфические CSS-файлы в JSX этого компонента, поскольку он позволяет всем соответствующим кодам для этого компонента жить в одном месте. Если я удалю компонент, то этот CSS больше не является частью какой-либо сборки. Если я хочу повторно использовать компонент, тогда CSS находится прямо там, чтобы пойти с ним.

Answer 3

OK Итак, я получил помощь от Juho Vepsäläinen от survivejs на этом. HIs советом был

Чтобы найти Листовку CSS, вы должны обязательно указать путь к листочке/dist/leaflet.css в настройках вашего веб-пакета. Вероятно, у вас есть путь к стилю (PATHS.style), если вы следите за материалом. Имея что-то вдоль пути. Решает (__ имя_имя, 'node_modules/листовки/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]"} 
] 
}