Angular 6错误：CSSSyntaxError-编译失败

Question

说明

我在为“ background”属性提及的url（）中收到相对路径错误。

当我使用绝对路径时，似乎工作正常。

错误消息

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;
    }
}

注意

以前，我有一个单独的文件夹img，但没有在资产文件夹中包含它。当我回答一些问题时，它建议我必须尝试从资产文件夹中加载图像。因此，我将img文件夹复制到资产文件夹，并删除了较旧的img文件夹。 但是错误仍然存​​在

我不明白为什么会这样，有人可以帮我吗。谢谢！

这是文件夹的层次结构

Hierarchy of folders

完成错误

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

我想angular可以直接访问Assets文件夹。我们不需要按照层次结构添加“ ../”。

尝试使用-url（assets / img / DSC_0291.JPG）

无需'../'即可直接访问。

Answer 2

好像是Angular 6中的一个已知问题。

举个例子，您最近安装了一个 bootstrap css ，并希望将其添加为全局样式。css然后我们知道这些软件包已添加到“ node_module”中，但如果是角形6我们可以通过在相对路径中使用“ ../”而不是“〜”来引用这些包。

之前

  

@import“〜/ bootstrap / dist / css / bootstrap.css”;

之后

  

@import“ ../ node_modules / bootstrap / dist / css / bootstrap.css”;