无法解析“node_modules/@angular/cdk/overlay-prebuilt.css”

Question

我尝试将 Angular 13 迁移到 Angular 15，之后收到错误消息：

./node_modules/@app/app-core/theme/app-theme.scss - 错误：模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）： 错误：无法解析“/Users/user/node_modules/@app/app-core/theme”中的“node_modules/@angular/cdk/overlay-prebuilt.css”

Angular.json 文件有配置：

"assets": [
  "src/assets",
  {
    "glob": "**",
    "input": "node_modules/@app/app-core/theme",
    "output": "app-core"
  }
],
"styles": [
  "node_modules/@app/app-core/theme/app-theme.scss",
  "src/styles.sass"
],

在app-theme.scss中：

@import 'font-family';
@import 'variables';
@import 'reboot';
@import 'mixins';
@import 'node_modules/@angular/cdk/overlay-prebuilt.css';
@import 'buttons';
@import '_grid';
@import '_container';
@import 'main';

app-theme.scss 是我导入到我的应用程序中的文件，我无法全局更改它，但如果我在本地更改：

@import 'node_modules/@angular/cdk/overlay-prebuilt.css';

到

@import '~@angular/cdk/overlay-prebuilt.css';

问题没有发生，应用程序正在运行。

我尝试删除node-modules和package-lock.json并重新安装所有依赖项，但它不起作用。

Answer 1

我在 NX 工作区的 Angular 库中遇到了一些类似的问题。角度库中的组件需要它才能正常工作，并且添加

@import '@angular/cdk/overlay-prebuilt.css';

会导致构建过程中出现错误（但在开发模式下运行故事书时不会出现错误）。

经过大量研究，我在

node_modules/@angular/cdk/package.json

中发现了这一点

    "./overlay-prebuilt.css": {
      "style": "./overlay-prebuilt.css"
    },
    "./overlay-prebuilt": {
      "style": "./overlay-prebuilt.css"
    },

因此将导入更新为@import

'@angular/cdk/overlay-prebuilt';

（最后删除了.css）解决了这个问题。构建成功，并且在开发模式下的 Storybook 中也能正常工作。