0

我创建了一个 app form office ui fabric 组件。Fabric 组件“Persona”被渲染。但我无法渲染 List 组件。我附上下面的代码。

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';我的组件时，当然会呈现没有样式。

我的问题是：如果指定导入，这些样式如何由 webpack 呈现，是否import './List.Ghosting.Example.scss';需要任何额外的配置？

4

1 回答 1

0

英特赛德import './List.Ghosting.Example.scss';

您需要将导入链接更改为：

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

正如您已office-ui-fabric-react作为 npm 模块安装一样

如果您开始使用 NPM，这是一篇很棒的文章

于 2018-03-28T18:25:08.257 回答