Как импортировать существующую таблицу стилей как модуль CSS с помощью Webpack / create-реагировать-приложение

Question

Справочная информация: я создаю плагин Wordpress (для установки в нескольких экземплярах Wordpress) с использованием React.В экземплярах Wordpress могут быть установлены разные темы / пользовательские таблицы стилей.

Плагин регистрирует шорткод в React;Сообщение в Wordpress, содержащее этот шорткод [MyForm], инструктирует Wordpress отрисовывать контейнерный div (с хорошо известным 'id') и ставить в очередь выходные данные скрипта и таблицы стилей из Webpack.Все идет нормально.

Я использую библиотеку компонентов реагировать-md , которая настраивает различные функции (стилизация элементов ввода, заголовки, шрифты по умолчанию и т. Д.).

Вв тот момент, когда я импортирую таблицу стилей для response-md с

import 'react-md/dist/react-md.blue-green.min.css';

Проблема, с которой я сталкиваюсь, заключается в том, что некоторые стили из Reaction-md перезаписываются темой Wordpress.

Я понимаю, что create-реагировать-приложение 2.x включает в себя поддержку модулей CSS. Могу ли я использовать их для :

1. Убедитесь, что мой компонент получает более специфичные селекторы, чтобы мои стили / стили из response-md не перезаписывались
2. Убедитесь, что мои стили / стили из activ-md не просочились на остальную часть страницы.

Примечание: если необходимо, я с удовольствием извлечу из create-реагировать-приложение и получумои руки грязные от Webpack.

Answer 1

Использование SASS для импорта файла CSS в соответствии с правилом работает, например,

.my-form {
    @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
    @import url("https://fonts.googleapis.com/icon?family=Material+Icons");

    @import '~react-md/src/scss/react-md';
}