包括不是来自CDN的office-ui-fabric样式

时间:2017-02-20 13:16:53

标签: reactjs typescript webpack office-ui-fabric

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

我想在我的webpack包中包含css。这样做的最佳方式是什么?

从node_modules文件夹导入css。

this

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

1 个答案:

答案 0 :(得分:2)

最好的办法是你的解决方案有效,所以你可以继续使用它。但是,在导入第三方软件包时,我们不想包含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";。在该文件中,您还可以执行全局主题覆盖等操作。然后,您可以将此文件导入项目的其他文件中。

希望这可以帮到你。