Как загрузить SCSS из офиса UI ткани реагировать через веб-пакет

Я создал приложение из офисных компонентов из ткани. Тканевая составляющая "Персона" получена. Но я не могу сделать список компонентов. Я прилагаю код ниже.

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>
        );
    }
}

Я получил это сообщение об ошибке:

    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

Когда я удалю import './List.Ghosting.Example.scss'; мой компонент будет отображаться без стилей, конечно.

Мой вопрос: как эти стили отображаются в веб-пакете, если импорт указан import './List.Ghosting.Example.scss'; Нужна ли дополнительная конфигурация?

Источник

1 ответ

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

Вам нужно изменить ссылку для импорта на:

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

Как вы установили office-ui-fabric-react как модуль npm

Это отличная статья, если вы начинаете работать с NPM

Источник
Другие вопросы по тегам