Angular 6 错误:CSSSyntaxError - 编译失败 [英] Angular 6 error: CSSSyntaxError - Failed to compile
本文介绍了Angular 6 错误:CSSSyntaxError - 编译失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
说明
我在 url() 中的相对路径收到错误，我在 'background' 属性中提到了这个错误.
当我使用绝对路径时，似乎工作正常.
错误信息
./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)模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出的值而不是 Error 的实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_config.scss:12:24: Can't resolve '../assets/img/DSC_0291.JPG' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src'<块引用>
@if $show-home-image{&#bg-img{背景:url(../assets/img/DSC_0291.JPG);^背景附件:固定；//背景大小:封面；_config.scss
$primary-color:grey;$show-home-image:true;//$home-image: url('/src/assets/img/DSC_0291.JPG');$背景不透明度:0.8；$overlay-color:black;$secondary-color:#eece1a;@mixin 背景{@if $show-home-image{&#bg-img{背景:url(../assets/img/DSC_0291.JPG);背景附件:固定；//背景大小:封面；&:在{之后内容: '';位置:固定；顶部:0；右:0；宽度:100%；高度:100%；z-索引:-1；背景:rgba($overlay-color,$background-opacity);}}}}@function set-text-color ($color){@if(亮度($color)>40){@return 黑色;}@别的{@return 白色；}}@mixin 缓出 {过渡:所有 0.5 秒缓出；}@mixin mediaSm {@media 屏幕和(最大宽度:500px){@内容;}}@mixin mediaMd {@media 屏幕和(最大宽度:768px){@内容;}}@mixin mediaLg {@media screen and (min-width: 769px) and (max-width: 1170px) {@内容;}}@mixin mediaXl {@media 屏幕和(最小宽度:1171px){@内容;}}注意
以前我有一个单独的文件夹 img 并且我没有将它包含在资产文件夹中.当我查看一些答案时，它建议我必须尝试从资产文件夹加载图像.所以我把img文件夹复制到assets文件夹，删除了旧的img文件夹.但是错误依旧
我不明白为什么会发生这种情况，有人可以帮助我.谢谢！
这是文件夹的层次结构
完成错误
警告在 ./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)模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/contact/contact.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/contact/contact.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/main/main.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/work/work.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/work/work.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/header/header.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) autoprefixer:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:82:5: 找不到网格区域:bioimage, bio./src/app/about-me/about-me.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) postcss-url:/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/about-me.component.scss:29:4: 无法读取文件'/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/assets/img/my_portrait.jpg'，忽略./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)模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/work/work.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/work/work.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/about-me/about-me.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/about-me/about-me.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/contact/contact.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/contact/contact.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/main/main.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/header/header.component.scss 中的警告模块警告(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例) 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'，忽略./src/app/about-me/about-me.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出的值而不是错误的实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me/about-me.component.scss:29:16: Can't resolve './'/home/nithinhandranp/workspace/nithin-portfolio/src/app/about-me'中的assets/img/my_portrait.jpg'27 |28 |.生物图像{>29 |背景: url(./assets/img/my_portrait.jpg);|^30 |网格区域:生物图像；31 |保证金:自动；./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)模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/about-me/about-me.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/about-me/about-me.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src/app/about-me'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/contact/contact.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出的值而不是错误的实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src/app/contact'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/contact/contact.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src/app/contact'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/header/header.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出的值而不是错误的实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: Can't resolve '../assets/img/my_portrait_small.jpg' 在 '/home/nithinchandranp/workspace/nithin-portfolio/src/app/header'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/main/main.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg'在'/home/nithinchandranp/workspace/nithin-portfolio/src/app/main'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/work/work.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg'在'/home/nithinchandranp/workspace/nithin-portfolio/src/app/work'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;./src/app/work/work.component.scss 中的错误模块错误(来自 ./node_modules/postcss-loader/lib/index.js):(发出值而不是错误实例)CssSyntaxError:/home/nithinchandranp/workspace/nithin-portfolio/src/scss/_mobile.scss:47:24: 无法解析 '../assets/img/my_portrait_small.jpg'在'/home/nithinchandranp/workspace/nithin-portfolio/src/app/work'45 |宽度:150px；46 |高度:150px；>47 |背景: url(../assets/img/my_portrait_small.jpg);|^48 |边界半径:50%；49 |边框:实心 3px $secondary-color;ℹ 「wdm」:编译失败._mobile.scss
//宽屏@include mediaXl{}//桌面@include mediaLg{}//片剂@include mediaMd{.家{对齐项目:居中；文本对齐:居中；.lg-标题{行高:1；边距底部:1rem；}}.菜单{.menu-branding{浮动:无；宽度:100%；最小高度:0；高度:25vh；变换:translate3d(100%,0,0);&.show{变换:translate3d(0,0,0);}.肖像{显示:弹性；左边距:自动；右边距:自动；宽度:150px；高度:150px；背景: url(./assets/img/my_portrait_small.jpg);边界半径:50%；边框:实心 3px $secondary-color;//不透明度:1;}}.菜单导航{浮动:无；宽度:100%；最小高度:0；高度:75vh；变换:translate3d(-100%,0,0);字体大小:24px；&.show{变换:translate3d(0,0,0);}}}.关于{对齐项目:居中；文本对齐:居中；.关于信息{网格模板区域:'生物图像''生物';网格模板列:1fr；}}.接触{对齐项目:居中；文本对齐:居中；}.工作{对齐项目:居中；文本对齐:居中；}}//智能手机@include mediaSm{.家{.lg-标题{边距顶部:10vh；字体大小:5rem；}}} 解决方案
我猜 angular 会直接访问 assets 文件夹.我们不需要按照层次结构添加../".
尝试使用这个 - url(assets/img/DSC_0291.JPG)
直接访问，无需'../'.
Description
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 Message
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
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 !
This is the hierarchy of the folders
Completer Error
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;
}
}
}
解决方案
I guess angular takes the assets folder access directly. We dont need to add '../' as per hierarchy.
Try using this - url(assets/img/DSC_0291.JPG)
Access directly without '../'.
这篇关于Angular 6 错误:CSSSyntaxError - 编译失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
