How to load scss from office ui fabric react by webpack

Question

I created an app form office ui fabric components. Fabric component "Persona" got rendered. But I can not render List component. I am attaching the code below.

import * as React from 'react';
import {
    FocusZone,
    FocusZoneDirection
} from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List';
import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
import './List.Ghosting.Example.scss';

export interface IListGhostingExampleProps {
    items: any[];
    cases: any[];
}

export class ListGhostingExample extends React.Component<IListGhostingExampleProps, {}> {
    constructor(props: IListGhostingExampleProps) {
        super(props);
    }

    public render() {
        const items  = this.props.cases[0];

        return (
            <FocusZone direction={ FocusZoneDirection.vertical }>
                <div className='ms-ListGhostingExample-container' data-is-scrollable={ true }>
                    <List
                        items={ items }
                        onRenderCell={ this._onRenderCell }
                    />
                </div>
            </FocusZone>
        );
    }

    private _onRenderCell(item: any, index: number, isScrolling: boolean): JSX.Element {
        return (
            <div className='ms-ListGhostingExample-itemCell' data-is-focusable={ true }>
                <Image
                    className='ms-ListGhostingExample-itemImage'
                    src={ isScrolling ? undefined : item.thumbnail }
                    width={ 50 }
                    height={ 50 }
                    imageFit={ ImageFit.cover }
                />
                <div className='ms-ListGhostingExample-itemContent'>
                    <div className='ms-ListGhostingExample-itemName'>{ item.name }</div>
                    <div className='ms-ListGhostingExample-itemIndex'>{ `Item ${index}` }</div>
                </div>
            </div>
        );
    }
}

I received this error message:

    Failed to compile.

./src/components/activities.tsx
Module not found: Error: Can't resolve './List.Ghosting.Example.scss' in '/Users/mi/Sites/accessCRM_outlook_add_in/src/components'
 @ ./src/components/activities.tsx 19:0-39
 @ ./src/components/app.tsx
 @ ./src/main.tsx
 @ multi (webpack)-dev-server/client?https://localhost:3100 webpack/hot/dev-server webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./main.tsx

When I will remove import './List.Ghosting.Example.scss'; my component will be rendered without styles of-course.

My question is: How these styles gets render by webpack if the import is specified by import './List.Ghosting.Example.scss'; is there any additional configuration needed ?

Answer 1

Intsead of import './List.Ghosting.Example.scss';

You need to change the import link to :

import 'office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.scss';

As you have installed office-ui-fabric-react as an npm module

This is a great article if you are getting started with NPM