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

【问题标题】：How to import existing stylesheet as CSS module using Webpack / create-react-app如何使用 Webpack / create-react-app 将现有样式表作为 CSS 模块导入
【发布时间】：2018-10-07 06:44:10
【问题描述】：

背景：我正在使用 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 模块的支持。 我可以利用这些来：

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

注意：如有必要，我很乐意退出 create-react-app 并使用 Webpack 亲自动手。

【问题讨论】：

标签： webpack material-design web-component create-react-app css-modules

【解决方案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';
}

【讨论】：