带有创建反应应用程序的纱线 2 和 dart sass

Posted 2023-02-22

【中文标题】带有创建反应应用程序的纱线 2 和 dart sass

【英文标题】：Yarn 2 and dart sass with create react app

【发布时间】：2020-06-04 07:35:38

【问题描述】：

我一直在尝试更新 Create React 应用程序以使用 yarn 2 和即插即用 (PNP)。当我在.yarnrc.yml 中使用nodeLinker: node-modules 时，我可以成功启动开发服务器。没有它，我最终会得到

./src/App.scss (./.yarn/$$virtual/css-loader-virtual-fe3fa7be11/0/cache/css-loader-npm-3.4.2-300ee159b3-2.zip/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./.yarn/cache/postcss-loader-npm-3.0.0-f4ab99b685-2.zip/node_modules/postcss-loader/src??postcss!./.yarn/cache/resolve-url-loader-npm-3.1.1-cf1a268137-2.zip/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./.yarn/unplugged/sass-loader-virtual-14ae4e1150/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Error: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: node-sass (via "node-sass")
Required by: sass-loader@virtual:74ba539c0b6c6c8346ea151c91664bff0bef13782983a6f90ddf1a26160140360771dcf40d0863b46ff7add674bc2c42a37daea25f24f4ea96f7843786460ecd#npm:8.0.2 (via /Users/me/color-contrast-matrix/.yarn/unplugged/sass-loader-virtual-14ae4e1150/node_modules/sass-loader/dist/)

【参考方案1】：

看起来 yarn 2 提供了一种覆盖包依赖项的方法。至少在这种情况下，您必须提供缺少的依赖项。

来自文档current link：

某些包的指定可能不正确 依赖项 - 例如缺少一个依赖项，导致 纱线拒绝它的访问。 packageExtensions 字段提供了一种方法 用额外的扩展现有的包定义 信息。如果您使用它，请考虑向上游发送 PR 并 将您的扩展贡献给 plugin-compat 数据库。

安装node-sass并添加此配置后，编译成功。

# .yarnrc.yml
packageExtensions:
  'sass-loader@*':
    optionalDependencies:
      node-sass: '*'

【讨论】：

酷。我一直在寻找答案大约一个小时。它解决了我的问题。它就像一个魅力。谢谢。

这不适用于 yarn 2.4.0。 Usage Error: Unrecognized configuration settings found: packageExtensions['sass-loader@*'].optionalDependencies

@RayShan 查看github.com/wegry/yarn-2.4.0-package-extensions/pull/1/files 以获得更充实的示例。

@wegry 谢谢，使用dependencies 而不是optionalDependencies 也对我有用。

【参考方案2】：

基于 wegry 的回答，更好的方法是修复 react-scripts，因为这是缺少对等依赖的地方。

#.yarnrc.yml

packageExtensions:
  'react-scripts@*':
    peerDependencies:
      node-sass: ^4.0.0 || ^5.0.0'    # Or sass: ^1.3.0'

我正在使用与当前由react-scripts 依赖的sass-loader 版本的 peerDependency 匹配的版本。 （我希望在react-scripts 的下一个版本出来时，他们会修复这个错误。）

这是在告诉 Yarn react-scripts 真的应该依赖于 sass（以及 node-sass），以便 sass-loader 可以使用它们。

sass-loader 本身已经正确定义了它的依赖关系。

【讨论】：

这是正确的，根本原因是react-scripts 没有将它们声明为对等依赖项。 sass-loader 很好。