Can't resolve 'node_modules/@angular/cdk/overlay-prebuilt.css'

Question

I've tried to migrate Angular 13 to Angular 15 and after this I get error message:

./node_modules/@app/app-core/theme/app-theme.scss - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve 'node_modules/@angular/cdk/overlay-prebuilt.css' in '/Users/user/node_modules/@app/app-core/theme'

Angular.json file has configurations:

"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"
],

In 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 is file which I import to my app and I can't change it globally but if I changed locally:

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

to

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

The problem didn't occur and app is running.

I've tried deleting node-modules and package-lock.json and reinstall all dependencies but it doesn't work.

Jagan Pandurangan · Accepted Answer · 2024-10-24 17:11:10Z

0

I had slightly similar problem in an Angular library in a NX workspace of mine. The component in the angular library needed this to work properly and adding @import '@angular/cdk/overlay-prebuilt.css'; was resulting in an error during build (but not while running storybook in dev mode).

After lot of research I found this in node_modules/@angular/cdk/package.json

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

So updating the import to @import '@angular/cdk/overlay-prebuilt'; (removed .css at the end) solved this issue. The build is successful and it works in storybook too in dev mode.

answered Oct 24, 2024 at 17:11

Jagan Pandurangan

4323 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't resolve 'node_modules/@angular/cdk/overlay-prebuilt.css'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related