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



我使用Typescript和Office-UI-Fabric有一个React项目。在简单的教程中,织物CSS从CDN加载。

我想在我的Webpack捆绑包中包含CSS。最好的方法是什么?

从node_modules文件夹中导入CSS。

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

是否还有其他更好的方法将CSS文件进入捆绑包?

最好的方法是您的解决方案有效,因此您可以继续使用它。但是,在导入第三方软件包时,我们不喜欢包括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面料,因此我想您最终希望使用其组件,例如按钮和对话框。这些组件以react组件为单位。

组件

如果要使用组件,则需要做的就是导入组件本身,例如import { Button } from 'office-ui-fabric-react'。该组件已经包括所需的所有样式。因此,您不需要自己进口CSS。

常见样式

如果您需要使用通用样式,则可以在自己的SCSS文件中进行@import "~office-ui-fabric-react/dist/sass/_Fabric.Common.scss";。在该文件中,您还可以执行诸如全局主题覆盖之类的事情。然后,您可以在项目的其他文件中导入此文件。

希望这可以帮助您。

最新更新