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

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

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

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

На данный момент я импортирую таблицу стилей для response-md с помощью

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

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

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

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

NB: При необходимости я с радостью выйду из приложения create-react-app и запачкаю руки с помощью Webpack.


webpack create-react-app material-design css-modules web-component
person eddiewould    schedule 07.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Использование 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';
}
person eddiewould    schedule 08.10.2018