Yarn 2 和 dart sass 与 create react app
Yarn 2 and dart sass with create react app
我一直在尝试更新 Create React App 以使用 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/)
看起来 yarn 2 提供了一种覆盖包依赖项的方法。您必须提供缺少的依赖项,至少在这种情况下。
来自文档 current link:
Some packages may have been specified incorrectly with regard to their
dependencies - for example with one dependency being missing, causing
Yarn to refuse it the access. The packageExtensions fields offer a way
to extend the existing package definitions with additional
information. If you use it, consider sending a PR upstream and
contributing your extension to the plugin-compat database.
安装node-sass
并添加此配置后,编译成功
# .yarnrc.yml
packageExtensions:
'sass-loader@*':
optionalDependencies:
node-sass: '*'
基于 wegry 的回答,更好的方法是修复 react-scripts,因为那是缺少对等依赖的地方。
#.yarnrc.yml
packageExtensions:
'react-scripts@*':
peerDependencies:
node-sass: ^4.0.0 || ^5.0.0' # Or sass: ^1.3.0'
我使用的版本与 sass-loader
当前依赖于 react-scripts
的版本的 peerDependency 相匹配。 (我希望在 react-scripts
的下一个版本发布时,他们会修复这个错误。)
这是在告诉 Yarn react-scripts
确实应该对等依赖 sass
(以及 node-sass
),因此 sass-loader
可以使用它们。
sass-loader
本身已正确定义其依赖项。
我一直在尝试更新 Create React App 以使用 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/)
看起来 yarn 2 提供了一种覆盖包依赖项的方法。您必须提供缺少的依赖项,至少在这种情况下。
来自文档 current link:
Some packages may have been specified incorrectly with regard to their dependencies - for example with one dependency being missing, causing Yarn to refuse it the access. The packageExtensions fields offer a way to extend the existing package definitions with additional information. If you use it, consider sending a PR upstream and contributing your extension to the plugin-compat database.
安装node-sass
并添加此配置后,编译成功
# .yarnrc.yml
packageExtensions:
'sass-loader@*':
optionalDependencies:
node-sass: '*'
基于 wegry 的回答,更好的方法是修复 react-scripts,因为那是缺少对等依赖的地方。
#.yarnrc.yml
packageExtensions:
'react-scripts@*':
peerDependencies:
node-sass: ^4.0.0 || ^5.0.0' # Or sass: ^1.3.0'
我使用的版本与 sass-loader
当前依赖于 react-scripts
的版本的 peerDependency 相匹配。 (我希望在 react-scripts
的下一个版本发布时,他们会修复这个错误。)
这是在告诉 Yarn react-scripts
确实应该对等依赖 sass
(以及 node-sass
),因此 sass-loader
可以使用它们。
sass-loader
本身已正确定义其依赖项。