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

Question

背景：我正在使用 React 构建一个 Wordpress 插件（将安装在多个 Wordpress 实例中）。 Wordpress 实例可能安装了不同的 themes/custom 样式表。

该插件向 React 注册了一个简码； Wordpress 中包含短代码 [MyForm] 的 post 指示 Wordpress 呈现容器 div（带有 well-known '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 模块的支持。 我可以利用这些来:

确保我的组件获得 more-specific 选择器，以便我的样式/来自 react-md 的样式不会被覆盖
确保我的样式/来自 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';
}

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

How to import existing stylesheet as CSS module using Webpack / create-react-app

webpack

material-design

web-component

create-react-app

css-modules