遇到此错误：
ERROR in multi styles
Module not found: Error: Can't resolve '/Users/rgspatel/Documents/Seed_CASS/ui/src/app.css' in '/Users/rgspatel/Documents/Seed_CASS/ui/node_modules/angular-cli/models'
@ multi styles
我的尝试 - 这些文件应该是.scss但是我的猜测是CLI无法使用scss？在尝试使用以前的Google资料时遇到了同样的问题
app.css
@import "../../../node_modules/bootstrap/variables.css";
@import "app-base.css";
应用-base.css
@import "../bootstrap/bootstrap.scss";
$topnav-background-color: #222;
.user-avatar {
border: 3px solid #FFF;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#toggle-sidebar{
position: fixed;
top: 0px;
left: 5px;
color: #FFF;
background: #222;
font-size: 23px;
z-index: 3;
display: none;
}
.btn:focus{
outline: 3px auto #FFF;
}
.topnav{
border-radius: 0;
background-color: $topnav-background-color;
padding : 6px;
z-index:2;
.text-center{
text-align: center;
padding-left : 0;
cursor: pointer;
}
.top-right-nav{
.buy-now{
a{
color:#999;
}
}
.dropdown-menu{
top: 40px;
right: -5px;
left : auto;
.message-preview{
.media{
.media-body{
.media-heading{
font-size: 14px;
font-weight: bold;
margin-bottom : 0;
}
p{
margin : 0;
}
p.last{
font-size : 13px;
margin-bottom: 0;
}
}
}
}
hr {
margin-top: 1px;
margin-bottom: 4px;
}
}
}
}
a:hover{
text-decoration: none;
}
.sidebar{
border-radius: 0;
position: fixed;
z-index: 3;
top: 50px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: $topnav-background-color;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
.list-group{
a.list-group-item{
background: $topnav-background-color;
border: 0;
border-radius: 0;
color: #999;
text-decoration: none;
}
a:hover{
background: darken($topnav-background-color, 5%);
color: #fff;
}
a.router-link-active{
background: darken($topnav-background-color, 5%);
color: #fff;
}
}
.sidebar-dropdown{
*:focus{
border-radius: none;
border:none;
}
.panel-title{
font-size : 1rem;
height : 50px;
margin-bottom:0;
a{
color : #999;
text-decoration : none;
font-weight:400;
background:$topnav-background-color;
span{
position: relative;
display: block;
padding: .75rem 1.5rem;
padding-top:1rem;
}
}
a:hover,a:focus{
color: #fff;
outline: none;
outline-offset: -2px;
}
}
.panel-title:hover{
background: darken($topnav-background-color, 5%);
}
.panel-collapse{
border-radious :0;
border : none;
.panel-body{
.list-group-item{
border-radius : 0;
background-color: $topnav-background-color;
border: 0 solid transparent;
a{
color:#999;
}
a:hover{
color:#FFF;
}
}
.list-group-item:hover{
background : darken($topnav-background-color, 5%);
}
}
}
}
}
.bg-white {
background: #fff;
}
.main-container{
margin: 50px 0 0 225px;
padding: 10px;
-ms-overflow-x: hidden;
overflow-x: hidden;
position: relative;
}
.chat-panel{
.chat-dropdown{
margin-top: -3px;
}
.chat{
.left{
img{
margin-right: 15px;
}
}
.right{
img{
margin-left: 15px;
}
}
height: 350px;
overflow-y: scroll;
margin: 0;
padding: 0;
list-style: none;
li{
margin-bottom: 10px;
margin-right: 15px;
padding-bottom: 5px;
border-bottom: 1px dotted #999;
}
}
.card-footer{
input{
padding : 3px;
}
}
}
/* RTL ashboard */
.sidebarPushRight{
left: 225px !important;
z-index:10;
}
.mainContainerPushLeft{
margin : 55px 255px 0 0;
}
/* End */
.display-sm{
display:none;
}
.hide-sm{
display:block;
}
@media (min-width: 0){
.navbar-toggleable-xs {
display: block !important;
}
}
@media screen and (max-width: 600px) {
.topnav{
.text-center{
a{
font-size: 20px;
}
}
}
}
@media screen and (max-width: 768px) {
#toggle-sidebar{
display:block;
}
.topnav{
.text-center{
padding-left : 55px;
}
}
.top-right-nav{
display: none;
}
.navbar-brand{
float: none;
display: inline-block;
cursor: pointer;
}
.show-name{
display: block !important;
z-index: 1;
}
.display-sm {
display:block;
}
.hide-sm{
display:none;
}
.sidebar{
left:0;
}
.main-container{
margin-left : 0;
}
.loading {
left: 39% !important;
}
}
.carousel {
.carousel-control{
cursor: pointer;
}
.carousel-inner {
.carousel-item{
img{
width : 100%;
max-height : 373px;
}
}
.fa-chevron-left:before {
position: absolute;
top: 46%;
left : 50px;
}
.fa-chevron-right:before {
position: absolute;
top: 46%;
right : 50px;
}
}
}
.login-page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: $topnav-background-color;
text-align: center;
color: #fff;
padding: 3em;
.col-lg-4{
padding :0;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 0;
}
.input-underline {
background: 0 0;
border: none;
box-shadow: none;
border-bottom: 2px solid rgba(255,255,255,.5);
color: #FFF;
border-radius: 0;
}
.input-underline:focus {
border-bottom: 2px solid #fff;
box-shadow: none;
}
.rounded-btn{
-webkit-border-radius: 50px;
border-radius: 50px;
color: rgba(255,255,255,0.8);
background: $topnav-background-color;
border: 2px solid rgba(255,255,255,0.8);
font-size: 18px;
line-height: 40px;
padding: 0 25px;
}
.rounded-btn:hover,.rounded-btn:focus,.rounded-btn:active,.rounded-btn:visited{
color: rgba(255,255,255,1);
border: 2px solid rgba(255,255,255,1);
outline: none;
}
h1 {
font-weight: 300;
margin-top: 20px;
margin-bottom: 10px;
font-size: 36px;
small {
color: rgba(255,255,255,0.7);
}
}
.form-group {
padding: 8px 0;
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.6) !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: rgba(255,255,255,0.6) !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: rgba(255,255,255,0.6) !important;
}
input:-ms-input-placeholder {
color: rgba(255,255,255,0.6) !important;
}
}
.form-content {
padding: 40px 0;
}
}
.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFF;
padding: 10px;
display: block;
}
}
}
}
}
.spinner {
position: fixed !important;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -55px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
角-cli.Json：
{
"project": {
"version": "1.0.0-beta.15",
"name": "mobile-web"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"app.css",
"animate.css",
"styles.css"
],
"scripts": [
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}