Question

我创建了一个app form办公室ui fabric组件。面料组件＆＃34; Persona＆＃34;得到了。但我无法渲染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';时，我的组件将在没有样式的情况下呈现。

我的问题是：如果导入是由import './List.Ghosting.Example.scss';指定的，那么这些样式如何通过webpack呈现是否还需要其他配置？

Answer 1

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

的Intsead

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

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

您已将office-ui-fabric-react安装为npm模块

如果您开始使用NPM，这是great article

如何从办公室ui织物加载scss反应webpack

1 个答案: