我使用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";
。在该文件中,您还可以执行诸如全局主题覆盖之类的事情。然后,您可以在项目的其他文件中导入此文件。
希望这可以帮助您。