我刚刚从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';