描述
我在为“ 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文件夹。但是错误仍然存在
我不明白为什么会这样,有人可以帮我。谢谢 !
这是文件夹的层次结构
文件夹层次结构
完成者错误
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; } } }
小智.. 7
我猜想角度直接访问资产文件夹访问。我们不需要按照层次结构添加“ ../”。
尝试使用它-url(assets / img / DSC_0291.JPG)
不使用“ ../”直接访问。
我猜想角度直接访问资产文件夹访问。我们不需要按照层次结构添加“ ../”。
尝试使用它-url(assets / img / DSC_0291.JPG)
不使用“ ../”直接访问。