拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 升级Angular应用的npm包后,sass-loader不再作业

升级Angular应用的npm包后,sass-loader不再作业

白鹭 - 2022-01-25 2002 0 0

我刚刚从 Angular 12 升级到 Angular 13,还更新了其他一些 NPM 包。
其中之一包含我的 angular.json 档案中参考的 scss 档案。这从来都不是问题,但是在尝试为我的应用程序提供服务后,我收到一条我很难理解的错误讯息:

./src/styles/ag-grid.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ?
1 │ @import 'my-custom-package-layout/src/lib/styles/styles.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?
  src\styles\ag-grid.scss 1:9  root stylesheet

./src/styles/products.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/products.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ?
1 │ @import 'my-custom-package-layout/src/lib/styles/mixins.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?
  src\styles\products.scss 1:9  root stylesheet

./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ?

这只是很长的错误讯息的第一行,指出在许多档案中找不到“my-custom-package-layout/src/lib/styles/styles.scss”。
但是,如果我使用 Visual Studio 代码导航到那里,我不会收到错误,并且参考似乎很好。

这让我觉得 sass-loader 通常不再作业了。(第一行很长。看那里——它真的像这样!)
Angular 中的 sass-loader 是如何实作的?我无法重新安装 sass,因为它甚至没有在我的 package.json 中参考。
它是 Angular.cli 的一部分吗?

我可以尝试什么更接近解决方案?

如果我运行“npm rebuild node-sass”,我很快就会得到回复:

rebuilt dependencies successfully

没变化...

uj5u.com热心网友回复:

这是因为 node-sass 的快取版本。你可以试试这个。

  • 从全域 npm-cache 中洗掉 node-sass(对于 Windows 用户 %userprofile%\AppData\Roaming\npm-cache)。
  • 从项目的 node_modules 目录中洗掉 node-sass。
  • 执行 npm install 以重新安装 node-sass。

uj5u.com热心网友回复:

我不得不在路径前面放一个?标志。这解决了它:

@import '~my-custom-package-layout/src/lib/styles/mixins.scss';

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *