角6错误: CSSSyntaxError -编译失败

Question

描述

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

Note

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

我不明白为什么会这样，有人能帮帮我吗？谢谢！

这是文件夹的层次结构。

文件夹层次结构

整机误差

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

我猜角可以直接访问资产文件夹。我们不需要按照层次结构添加‘./’。

尝试使用这个-url(资产/img/DSC_0291.jpg)

直接访问，而不需要“./”。

Answer 2

似乎是第六角已知的问题。

举个例子来说，您最近安装了一个引导css，希望将它添加到全局style.css中，然后我们知道包会被添加到'node_module‘中，但是在角为6的情况下，我们可以在相对路径中使用’./‘而不是'~’来引用这些包。

在此之前

@import "~/bootstrap/dist/css/bootstrap.css"；

之后

@import "../node_modules/bootstrap/dist/css/bootstrap.css"；