如何正确实现反应加载骨架？

Question

我正试图在我的项目中实现反应加载骨架库。

骨架构件代码：

import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

const MySkeleton: FC = () => {
    return (
        <SkeletonTheme baseColor="#000" highlightColor="#444" width={200} height={200}>
            <Skeleton circle={true}/>
        </SkeletonTheme>
    )
}

export default MySkeleton 

webpack配置代码：

...
{
    test: /\.(scss|css)$/,
    //exclude: /node_modules/,  => needed to avoid for react-skeleton-loading work
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName:
                        '[name]__[local]--[hash:base64:5]',
                },
            },
        },
        'sass-loader',
    ],
},
...

问题:呈现骨架组件(它显示在DOM中)，但屏幕上没有显示它的迹象。在DOM中呈现两个跨(一个在另一个内部--骨架组件)，但是样式(不是来自SkeletonTheme，也不是来自骨架)在DOM上使用。DOM显示在元素上使用样式，但我在屏幕上看不到它。

P.S:我尝试在骨架和SkeletonTheme组件中使用样式属性--不起作用

Answer 1

在我的例子中，webpack配置中的一些代码不允许skeleton.css文件上传到网页上。因此，您需要注释或删除以下几行：

...
            options: {
                modules: {
                    localIdentName:
                        '[name]__[local]--[hash:base64:5]',
                },
            },
...