Каков правильный способ включения jquery-библиотек, включая CSS, при использовании приложения create-react-app?

Question

Я пытаюсь использовать библиотеку jquery под названием select2 в моем приложении React, созданное приложением create-react-app.

Я добавил jquery и select2 в свой пакет package.json, и я могу сделать работу javascript.

Однако, стиль не работает, так как файл css select 2 не включен правильно.

Я вижу следующий файл в моем проекте:

node_modules/select2/dist/css/select2.min.css 

и, конечно, я могу скопировать файл в общественном/CSS и добавить к моему index.html:

<link href="css/select2.min.css" rel="stylesheet"> 

I Я уверен, что есть лучший способ использования мощности веб-пакета и инструментальной привязки create-react-app. Но как?

Answer 1

Мне часто требуется только css в индексе моего приложения.

index.js: require('node_modules/select2/dist/css/select2.min.css')

Answer 2

Я думаю, что лучший способ заключается в "импортировать" CSS в .js файл, который ссылается на ваш Jquery библиотека:

import 'select2/dist/css/select2.min.css'; 

Таким образом, в CSS ВОЛЮ быть включенным в файл bundle.js, который сгенерирован, и вы «локализировали» эту зависимость от кода, который этого требует.

Относительно примечания: вы можете пожелать Google «отреагировать на выбор» и изучить множество библиотек, которые обеспечивают более «реактивный» способ реализации виджета.