Angular 6错误:CSSSyntaxError-编译失败 [英] Angular 6 error: CSSSyntaxError - Failed to compile
本文介绍了Angular 6错误:CSSSyntaxError-编译失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
说明
我在为"background"属性提及的url()中收到相对路径错误.
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 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文件夹中.当我回答一些问题时，它建议我必须尝试从资产文件夹中加载图像.因此，我将img文件夹复制到资产文件夹，并删除了较旧的img文件夹. 但是错误仍然存在
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 !
这是文件夹的层次结构
完成错误
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可以直接访问资产文件夹.我们不需要按照层次结构添加"../".
I guess angular takes the assets folder access directly. We dont need to add '../' as per hierarchy.
尝试使用它-url(assets/img/DSC_0291.JPG)
Try using this - url(assets/img/DSC_0291.JPG)
无需'../'即可直接访问.
Access directly without '../'.
这篇关于Angular 6错误:CSSSyntaxError-编译失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
