React+Webpack导入node_modules中react-html5-camera-photo的CSS文件报错如何解决

• 针对react-html5-camera-photo的CSS处理规则仅配置了css-loader，缺少style-loader。css-loader仅负责解析CSS内容为JS模块，无法将样式注入到页面DOM中，且css-loader输出的JS模块代码会被当成CSS语法解析，直接抛出Unknown word语法错误。
• 业务样式的处理规则开启了CSS Modules，若第三方库的CSS走到该规则，类名会被哈希化，和组件内的原始类名不匹配，导致样式不生效。
• Webpack loader执行顺序为从use数组尾部到头部，原有规则顺序不符合loader执行要求。

修改webpack.config.js的module.rules配置如下：

module: {
  rules: [
    // 专门处理react-html5-camera-photo的CSS，不开启CSS Modules
    {
      test: /react\-html5\-camera\-photo(.*?)\.css$/,
      use: [
        "style-loader",
        { 
          loader: "css-loader", 
          options:{
            modules: false
          }
        }
      ]
    },
    // 处理项目自身的SCSS/CSS，排除第三方库的CSS避免冲突
    {
      test: /\.(scss|css)$/,
      exclude: /react\-html5\-camera\-photo(.*?)\.css$/,
      use: [
        "style-loader",
        { 
          loader: "css-loader",
          options: {
            modules: true,
          }
        },
        "sass-loader"
      ]
    }
  ]
}

配置修改完成后重启Webpack服务即可生效。

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