无法导入 Angular Material v15 预构建遗留主题

Question

我将 Angular 和 Material 更新到 v15，并且我想使用旧版组件，但是当我尝试导入旧版预构建主题时，出现此错误。

如果我导入材料预构建主题（不是旧版主题），编译器会成功构建，但我需要使用旧版组件并且需要旧版预构建主题

Answer 1

您是否尝试使用

../node_modules/@angular

导入它

完全一样： Angular Material 找不到 Angular Material 核心主题

Answer 2

问题在于如何公开文件以供导入。当使用相对路径导入时，您必须使用真实的文件名，当使用“package”导入时，您必须使用它们在 package.json 文件中公开的路径，所以这将是

@import "@angular/material/legacy-prebuilt-themes/deeppurple-ember.css"

或

@import "../node_modules/@angular/material/legacy-prebuilt-themes/legacy-deeppurple-ember.css"

您可以在 15.2.x 分支的 package.json 文件中看到这个 here

  "exports": {
    ".": {
      "sass": "./_index.scss"
    },
    "./theming": {
      "sass": "./_theming.scss"
    },
    "./_theming": {
      "sass": "./_theming.scss"
    },
    "./prebuilt-themes/indigo-pink.css": {
      "style": "./prebuilt-themes/indigo-pink.css"
    },
    "./prebuilt-themes/deeppurple-amber.css": {
      "style": "./prebuilt-themes/deeppurple-amber.css"
    },
    "./prebuilt-themes/pink-bluegrey.css": {
      "style": "./prebuilt-themes/pink-bluegrey.css"
    },
    "./prebuilt-themes/purple-green.css": {
      "style": "./prebuilt-themes/purple-green.css"
    },
    "./prebuilt-themes/*": {
      "style": "./prebuilt-themes/*.css"
    },
    "./legacy-prebuilt-themes/indigo-pink.css": {
      "style": "./legacy-prebuilt-themes/legacy-indigo-pink.css"
    },
    "./legacy-prebuilt-themes/deeppurple-amber.css": {
      "style": "./legacy-prebuilt-themes/legacy-deeppurple-amber.css"
    },
    "./legacy-prebuilt-themes/pink-bluegrey.css": {
      "style": "./legacy-prebuilt-themes/legacy-pink-bluegrey.css"
    },
    "./legacy-prebuilt-themes/purple-green.css": {
      "style": "./legacy-prebuilt-themes/legacy-purple-green.css"
    },
    "./legacy-prebuilt-themes/*": {
      "style": "./legacy-prebuilt-themes/*.css"
    }
  },