Angular 6 error: CSSSyntaxError - Failed to compile
Angular 6 error: CSSSyntaxError - Failed to compile
描述
我在 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 直接访问资产文件夹。我们不需要根据层次结构添加“../”。
试试这个 - url(assets/img/DSC_0291.JPG)
不带'../'直接访问
似乎是 Angular 6.
中的一个已知问题
举个例子，你最近安装了一个 bootstrap css 并想将它添加到全局 style.css 然后作为我们知道包被添加到 'node_module' 但在 angular 6 的情况下，我们可以通过在相对路径中使用 '../' 而不是 '~' 来引用这些包。
之前
@import "~/bootstrap/dist/css/bootstrap.css";
之后
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
描述
我在 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 直接访问资产文件夹。我们不需要根据层次结构添加“../”。
试试这个 - url(assets/img/DSC_0291.JPG)
不带'../'直接访问
似乎是 Angular 6.
中的一个已知问题举个例子，你最近安装了一个 bootstrap css 并想将它添加到全局 style.css 然后作为我们知道包被添加到 'node_module' 但在 angular 6 的情况下，我们可以通过在相对路径中使用 '../' 而不是 '~' 来引用这些包。
之前
@import "~/bootstrap/dist/css/bootstrap.css";
之后
@import "../node_modules/bootstrap/dist/css/bootstrap.css";