如何正确实现react-loading-skeleton？组件渲染后页面不显示

问题表现 #

• 组件正常渲染，DOM中可看到预期的两层嵌套span结构
• 元素检查面板显示节点已挂载样式类，但无任何骨架屏视觉效果
• 直接给Skeleton、SkeletonTheme组件传递内联style属性，问题依旧
• 已注释css规则里的exclude: /node_modules/配置，问题未解决

核心原因 #

webpack的css-loader配置存在问题：当前规则对所有匹配到的css、scss文件全量开启了CSS Modules能力，包括node_modules目录下react-loading-skeleton自带的全局样式文件。
CSS Modules会将样式文件内的类名按照[name]__[local]--[hash:base64:5]规则重写加哈希后缀，但react-loading-skeleton组件内部的类名是写死的固定值，重写后的类名和组件内部引用的类名完全不匹配，导致样式规则无法命中元素。

DOM检查器里看到节点挂了样式类，实际是经过CSS Modules重命名的哈希类，没有对应正确的骨架屏样式规则。内联样式无法生效是因为骨架屏的核心布局、扫光动画大量依赖伪元素、元素默认display属性等基础规则，零散的内联样式没法覆盖全量依赖。

修复步骤 #

将原有的单条css/scss处理规则拆分为两条，区分第三方依赖样式和业务样式做差异化处理：

// 1. 专门处理node_modules下的第三方全局CSS，不开启CSS Modules
{
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
},
// 2. 处理业务自有代码的css/scss文件，正常开启CSS Modules
{
  test: /\.(scss|css)$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      },
    },
    'sass-loader',
  ],
},

配置修改后注意：

• 完全重启webpack开发服务，不要依赖热更新，webpack规则变更不会被热更新识别
• 确认骨架屏样式引入路径正确：import 'react-loading-skeleton/dist/skeleton.css'，路径错误会导致样式文件根本没被打包
• width、height这类尺寸属性直接传给Skeleton组件即可，SkeletonTheme只负责统一配置基础色、高亮色、动画速度这类全局主题属性，不需要传尺寸参数

内容的提问来源于stack exchange，提问作者rgdzv