包括非CDN office-ui-fabric样式

Question

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

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

从node_modules文件夹导入css是可行的。

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

有没有其他更好的方法将css文件放入包中？

Answer 1

最好的是你的解决方案是有效的，所以你可以继续使用它。但是，在导入第三方软件包时，我们不喜欢包含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，比如按钮和对话框。这些组件作为React组件存在。

组件

如果您想要使用一个组件，您需要做的就是导入组件本身，例如import { Button } from 'office-ui-fabric-react'。组件已经包含了它需要的所有样式。因此，您不需要自己进行css导入。

常见风格

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

希望这能对你有所帮助。