CODEWITHSUNDEEP
reactjstypescriptwebpackoffice-ui-fabric
sschoof
sschoof

Reputation: 1721

Include office-ui-fabric styles not from CDN

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?

Upvotes: 3

Views: 3911

Answers (1)

warmsea
warmsea

Reputation: 431

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.

Upvotes: 3

Related Questions