CODEWITHSUNDEEP
angularangular-cliassets
Karan Chokshi
Karan Chokshi

Reputation: 114

How I can resolved the angular scss compilation error?

I am facing an issue when I compile the angular project.below I attached the error which I am getting in terminal

Error: ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/Documents/main.scss:82:4: Can't resolve '../assets/Nairobi2x.jpg' in '/home/Documents/projects/prd-name/src/scss'

  80 | 
  81 | .login-body {
> 82 |     background-image: url("../assets/Nairobi2x.jpg");
     |    ^
  83 |     background-size: cover;
  84 |     background-position: 100% 100%;

    at Object.emitError (/home/Documents/projects/prd-name/node_modules/webpack/lib/NormalModule.js:173:6)
    at /home/Documents/projects/prd-name/node_modules/@angular-devkit/build-angular/src/webpack/plugins/postcss-cli-resources.js:125:28
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 18)

Upvotes: 1

Views: 2843

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

When Angular CLI tries to resolve the file path, it can only look inside the assets folder.

background-image: url("assets/Nairobi2x.jpg");

Also, you have to make sure all the assets are copied correctly from angular.json configuration.

"assets": [
  "src/assets"
],

Upvotes: 1

Related Questions