Webpack style-loader插入SCSS到shadow DOM时options参数未定义如何解决

你遇到的options参数始终为undefined的核心原因是使用的style-loader版本低于3.0.0，只有3.0.0及以上版本的style-loader才支持将use()方法传入的自定义参数透传到insert配置函数的第二个参数中。你现有的Webpack配置和React调用逻辑本身没有错误，按以下步骤调整即可：

• 升级style-loader到3.0.0或更高版本
  执行对应包管理器的升级命令：

  # npm
  npm install style-loader@latest --save-dev
  # yarn
  yarn add style-loader@latest --dev
  

• 清理Webpack构建缓存后重新启动项目
  避免旧版本缓存的loader逻辑影响执行结果，可手动删除项目下的node_modules/.cache目录后再启动开发服务或执行构建。

升级完成后你原本的styles.use({ target })写法即可正常生效，insert函数中的options参数会拿到你传入的对象，样式会正常插入到指定的shadow DOM节点中。你之前尝试的{ options: { target: ... } }属于不必要的写法，不需要额外嵌套层级。

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