说明
我在 url() 中的相对路径收到错误，我在 'background' 属性中提到了这个错误。
当我使用绝对路径时，似乎工作正常。
错误信息
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 并且我没有将它包含在 Assets 文件夹中。当我查看一些答案时，它建议我必须尝试从 Assets 文件夹加载图像。所以我把img文件夹复制到assets文件夹，删除了旧的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;
}
}
}
最佳答案
我猜 angular 直接访问 Assets 文件夹。我们不需要根据层次结构添加“../”。
尝试使用这个 - url(assets/img/DSC_0291.JPG)
无需'../'直接访问。
关于 Angular 6 错误 : CSSSyntaxError - Failed to compile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52419646/