如何使用Webpack / create-react-app将现有样式表导入为CSS模块

Question

背景：我正在使用React构建一个Wordpress插件（要安装在多个Wordpress实例中）。 Wordpress实例可能安装了不同的主题/自定义样式表。

该插件向React注册了一个简码； Wordpress中包含该短代码[MyForm]的帖子指示Wordpress渲染容器div（带有众所周知的“ id”），并使Webpack的脚本和样式表输出入队。 到现在为止还挺好。

我正在使用react-md组件库，该库设置了各种内容（输入元素的样式，标题，默认字体等）。

目前，我正在使用react-md导入样式表

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

我遇到的问题是react-md的某些样式已被Wordpress主题覆盖。

我了解create-react-app 2.x包含对CSS模块的支持。 我可以利用这些来 ：

1. 确保我的组件获得更具体的选择器，以免我的样式/ react-md中的样式被覆盖
2. 确保我的样式/ react-md中的样式不会泄漏到页面的其余部分。

注意：如果有必要，我很高兴从create-react-app中退出，并开始使用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';
}