升级Angular应用程序的npm包后,sass加载程序不再工作



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

./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';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcstylesag-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';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcstylesproducts.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.
╷

这只是很长的错误消息的第一行,该消息指出在许多文件中找不到"我的自定义包布局/src/lib/styles/scss">
但如果我使用visual studio代码导航到那里,我不会收到错误,引用似乎也很好。

这让我认为sass加载程序一般不再工作。(第一行很长。看,它真的是这样的!(
sass加载程序是如何在Angular中实现的?我无法重新安装sass,因为它甚至没有在我的包.json中引用。
它是Angular.cli的一部分吗?

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

如果我运行"npm重建节点sass",我会很快得到回复:

rebuilt dependencies successfully

没有变化。。。

我不得不在路径前面加一个~号。这解决了问题:

@导入'~my custom package layout/src/lib/styles/mixins.scss';

这是因为node-sass的缓存版本。您可以尝试一下。

  • 从全局npm缓存中删除节点sass(适用于Windows用户%userprofile%\AppData\Roaming\npm缓存(
  • 从项目的node_modules目录中删除node-sas
  • 执行npm install以重新安装节点sass

我尝试在库名称之前添加~,在angular.json中,我尝试将库添加到stylePreprocessorOptions.includePaths,但对我不起作用。

我在库名称之前添加了node_modules,它解决了我的问题。@import 'node_modules/@myscope/mylib/src/assets/input.base.scss';

最新更新