如何在react-styleguidist 7与Webpack 4中自动加载本地第三方CSS

我之前也碰到过一模一样的需求：要把本地第三方CSS（比如Font Awesome这类被多个组件共用的图标样式）自动加载到React Styleguidist的样式指南里，还要确保这些样式能被正常纳入静态构建流程。当时尝试用mini-css-extract-plugin实现，但没得到官方维护者的有效帮助，后来自己摸索出了几个不同的实现方式，分享给你：

稳定可用的方案：master分支 #

这个分支采用mini-css-extract-plugin配合require配置的方式，不管是开发服务器运行还是生产环境构建都能正常工作。核心逻辑是在webpack配置中引入该插件，同时在Styleguidist的配置里通过全局require的方式自动注入共用CSS，确保样式能被正确提取、打包并在指南中生效。

不可行的方案：require分支 #

这个分支没有使用mini-css-extract-plugin，直接通过require加载CSS文件，结果不管是开发模式还是构建流程都无法正常运行——样式无法被webpack正确处理，要么加载失败要么样式完全不生效，所以这种方式直接pass掉。

有局限性的临时方案：template分支 #

这个分支的开发服务器能正常运行，但生产构建会失败。临时的补救办法是通过publicPath复制CSS文件，但需要借助dangerouslyUpdateWebpackConfig来修改webpack配置。不过这种方式不够优雅，而且存在构建不稳定的风险，只能作为应急的过渡方案。

内容的提问来源于stack exchange，提问作者bugzpodder