3

I have a react project using typescript and the office-ui-fabric. In the simple tutorial, the fabric css is loaded from the CDN.

I want to include the css in my webpack bundle. What is the best way to do so?

Import the css from the node_modules folder works.

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

Is there a other better way to get the css file into the bundle?

sschoof
  • 1,531
  • 1
  • 17
  • 24

1 Answers1

3

The best thing is that your solution works, so you can keep using it. However, when importing 3rd party packages, we don't like to include node_modules. So, import "office-ui-fabric-core/dist/css/fabric.min.css" or @import "~office-ui-fabric-core/dist/css/fabric.min.css" looks better to me. But you may need extra configurations to make it work.

Now the real answer

I recommend you to use office-ui-fabric-react if possible. Since you are using Office UI Fabric, I guess you'll eventually want to use their components like Button and Dialog. Those components live as React components.

Components

If you want to use a component, all you need to do is to import the component itself, for example, import { Button } from 'office-ui-fabric-react'. The component already included all the styles it needs. So, you don't need to do the css import yourself.

Common styles

If you need to use common styles, you can do @import "~office-ui-fabric-react/dist/sass/_Fabric.Common.scss"; in your own scss file. And in the that file, you can also do things like global theme overrides. Then you can import this file in other files of your projects.

Hope this could help you.

warmsea
  • 431
  • 3
  • 9
  • I think the `import { Fabric } from 'office-ui-fabric-react'; ` is that was I search for. I tried your code in my typescript project. But I did it not to work. No class for ms-Grid is loaded in the browser. – sschoof Feb 24 '17 at 08:55
  • I created a simple project to reproduce: https://github.com/StefanSchoof/reactTestOfficeUiFabric – sschoof Feb 24 '17 at 09:28
  • Sorry, I guess I remembered wrong. Components only includes styles of that components. And Fabric doesn't import common styles. – warmsea Feb 24 '17 at 10:53
  • By importing fabric.min.css, all fabric css are imported. By importing components and common styles as I mentioned, I think only needed pieces are imported. So I expect the final bundle to be smaller, depends on how many components you are using. – warmsea Feb 24 '17 at 11:00
  • Only the `_Fabric.Common.scss` is not enough, I had to add the `Fabric.Grid.Output.scss` to get it working (I updated https://github.com/StefanSchoof/reactTestOfficeUiFabric). So I have to add every Feature (font, color, icon, ...) of the style a scss file. i think I have to take look at purifycss – sschoof Feb 25 '17 at 11:58
  • I had issues with glyphs and solved it by looking at console warnings and followed url https://github.com/OfficeDev/office-ui-fabric-react/wiki/Using-icons. In startup index file added import { initializeIcons } from 'office-ui-fabric-react/lib/Icons'; – Nickolodeon Apr 25 '18 at 08:25