Angular 6 error: CSSSyntaxError - Failed to compile

Question

Description

I am receiving an error for the relative path in the url() that I mention for the 'background' property.

When I use an absolute path for it, seems to be working fine.

Error Message

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_config.scss:12:24: Can't resolve '../assets/img/DSC_0291.JPG' in '/home/nithinchandranp/workspace/nithin-portfolio/src'

   @if $show-home-image{
       &#bg-img{
         background: url(../assets/img/DSC_0291.JPG);
                    ^
          background-attachment: fixed;
          //background-size: cover;

_config.scss

$primary-color:grey;
$show-home-image:true;
//$home-image: url('/src/assets/img/DSC_0291.JPG');
$background-opacity: 0.8;
$overlay-color:black;
$secondary-color:#eece1a;


@mixin background {
    @if $show-home-image{
        &#bg-img{
            background: url(../assets/img/DSC_0291.JPG);  
            background-attachment: fixed;
            //background-size: cover; 


        &:after {
            content: '';
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: rgba($overlay-color,$background-opacity);

        }
        }
    }

}


@function set-text-color ($color){
    @if(lightness($color)>40){
        @return black;
    }
    @else{
        @return white;
    }
}


@mixin easeOut {
    transition: all 0.5s ease-out;
}


@mixin mediaSm {
    @media screen and (max-width: 500px) {
        @content;
    }
}

@mixin mediaMd {
    @media screen  and (max-width: 768px) {
        @content;
    }
}

@mixin mediaLg {
    @media screen and (min-width: 769px) and (max-width: 1170px) {
        @content;
    }
}

@mixin mediaXl {
    @media screen and (min-width: 1171px) {
        @content;
    }
}

Note

Previously I had a separate folder img and I did not includ it in the assets folder. When I went through some answers it suggested that I have to try to load the images from the assets folder. So I copied the img folder to the assets folder and deleted the older img folder. But still the error remains

I don't understand why this happens,Can somebody please help me. Thanks !

This is the hierarchy of the folders

Hierarchy of folders

Completer Error

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/contact/contact.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/contact/contact.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/main/main.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/work/work.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/work/work.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/header/header.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) autoprefixer: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: Can not find grid areas: bioimage, bio

WARNING in ./src/app/about-me/about-me.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/about-me.component.scss:29:4: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/assets/img/my_portrait.jpg', ignoring

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/work/work.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/work/work.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/about-me/about-me.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/about-me/about-me.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/contact/contact.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/contact/contact.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/main/main.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

WARNING in ./src/app/header/header.component.scss
Module Warning (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) postcss-url: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:12: Can't read file '/home/nithinchandranp/workspace/nithin-portfolio/src/app/assets/img/my_portrait_small.jpg', ignoring

ERROR in ./src/app/about-me/about-me.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/about-me.component.scss:29:16: Can't resolve './assets/img/my_portrait.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me'

  27 |
  28 | .bio-image{
> 29 |     background: url(./assets/img/my_portrait.jpg);
     |                ^
  30 |     grid-area: bioimage;
  31 |     margin: auto;

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/about-me/about-me.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/about-me/about-me.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/contact/contact.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/contact'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/contact/contact.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/contact'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/header/header.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/header'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/main/main.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/main'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/work/work.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/work'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ERROR in ./src/app/work/work.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' in '/home/nithinchandranp/workspace/nithin-portfolio/src/app/work'

  45 |             width: 150px;
  46 |             height: 150px;
> 47 |             background: url(../assets/img/my_portrait_small.jpg);
     |                        ^
  48 |             border-radius: 50%;
  49 |             border: solid 3px $secondary-color;

ℹ ｢wdm｣: Failed to compile.

_mobile.scss

//wide screens
@include mediaXl{


}
//desktops
@include mediaLg{


}

//tablets
@include mediaMd{

    .home{
        align-items: center;
        text-align: center;


        .lg-heading{
            line-height: 1;
            margin-bottom: 1rem;
        }

    }

    .menu{

        .menu-branding{
            float:none;
            width: 100%;
            min-height:0;
            height: 25vh;
             transform: translate3d(100%,0,0);


            &.show{
                transform: translate3d(0,0,0);
            }

            .portrait{
            display: flex;
            margin-left: auto;  
            margin-right: auto;
            width: 150px;
            height: 150px;
            background: url(./assets/img/my_portrait_small.jpg);
            border-radius: 50%;
            border: solid 3px $secondary-color;
            //opacity: 1;
        }

        }





      .menu-nav{

         float:none;
         width: 100%;
         min-height:0;
        height:75vh;
        transform: translate3d(-100%,0,0);
        font-size: 24px;

        &.show{
            transform: translate3d(0,0,0);

        }
    }

}

.about{

        align-items: center;
        text-align: center;    

.about-info{
     grid-template-areas: 
    'bioimage'
    'bio';
    grid-template-columns: 1fr;

}

}


.contact{


        align-items: center;
        text-align: center; 


}


.work{


        align-items: center;
        text-align: center; 

}

}

//smartphones
@include mediaSm{

    .home{
    .lg-heading{
        margin-top: 10vh;
              font-size: 5rem;

    }
    }

}

Answer 1

I guess angular takes the assets folder access directly. We dont need to add '../' as per hierarchy.

Try using this - url(assets/img/DSC_0291.JPG)

Access directly without '../'.