【问题标题】：Include office-ui-fabric styles not from CDN包括非 CDN 的 office-ui-fabric 样式
【发布时间】：2017-07-09 19:01:52
【问题描述】：

我有一个使用 typescript 和 office-ui-fabric 的 react 项目。在简单的tutorial 中，结构 css 是从 CDN 加载的。

我想在我的 webpack 包中包含 css。最好的方法是什么？

从 node_modules 文件夹中导入 css 工作。

import "../node_modules/office-ui-fabric-core/dist/css/fabric.min.css";

还有其他更好的方法可以将 css 文件放入包中吗？

【问题讨论】：

标签： reactjs typescript webpack office-ui-fabric

【解决方案1】：

最好的一点是您的解决方案有效，因此您可以继续使用它。但是，在导入 3rd 方包时，我们不喜欢包含 node_modules。所以，import "office-ui-fabric-core/dist/css/fabric.min.css" 或 @import "~office-ui-fabric-core/dist/css/fabric.min.css" 对我来说看起来更好。但您可能需要额外的配置才能使其正常工作。

现在真正的答案

如果可能，我建议您使用office-ui-fabric-react。由于您使用的是 Office UI Fabric，我猜您最终会想要使用他们的components，例如 Button 和 Dialog。这些组件作为 React 组件存在。

组件

如果要使用组件，只需导入组件本身即可，例如import { Button } from 'office-ui-fabric-react'。该组件已经包含了它需要的所有样式。因此，您无需自己进行 css 导入。

常用样式

如果需要使用常用样式，可以在自己的scss文件中做@import "~office-ui-fabric-react/dist/sass/_Fabric.Common.scss";。在该文件中，您还可以执行全局主题覆盖等操作。然后您可以将该文件导入您项目的其他文件中。

希望这对你有帮助。

【讨论】：

我认为import { Fabric } from 'office-ui-fabric-react'; 就是我要搜索的。我在我的打字稿项目中尝试了你的代码。但我这样做是为了不工作。浏览器中没有加载 ms-Grid 的类。
我创建了一个简单的项目来重现：github.com/StefanSchoof/reactTestOfficeUiFabric
对不起，我想我记错了。组件仅包含该组件的样式。而且 Fabric 不导入常见的样式。
通过导入fabric.min.css，所有的fabric css都被导入。通过导入我提到的组件和常用样式，我认为只导入需要的部分。所以我希望最终的捆绑包更小，这取决于你使用了多少组件。
只有_Fabric.Common.scss 是不够的，我必须添加Fabric.Grid.Output.scss 才能让它工作（我更新了github.com/StefanSchoof/reactTestOfficeUiFabric）。因此，我必须将样式的每个功能（字体、颜色、图标...）添加到 scss 文件中。我想我必须看看 purifycss