angular-cli


ERROR in Multistyles…Module not Found (Angular-cli.json)


Running into this error:
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
My Attempts
- These files are supposed to be .scss however my guess is that CLI is not being able to use scss? Encountered the same issue when trying to use Google Materials previously
app.css
#import "../../../node_modules/bootstrap/variables.css";
#import "app-base.css";
app-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);
}
}
Angular-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
}
}

Related Links

Angular CLI - ng serve won't run unless I specify port
ERROR in Multistyles…Module not Found (Angular-cli.json)
Angular Cli support for inline templates and css
Angular Cli - How do I rebuild my project
How to change angular 2 port from 4200 to any other
Is autoprefixer active in angular-cli beta 19
How to use nconf with Angular CLI?
angular-cli how to split output js files to vendor and script js file
Errors when installing angular-cli
Using Angular-CLI build to copy a file / directory
angular-cli 'ng' commands sluggish
I keep getting errors when usng angualr-cli - Cannot find Set, Promise, Map
Angular CLI installation failure
Angular CLI modify component generation
Error: Cannot find module '#angular/core'
How to build multiple applications with angular-cli?

Categories

HOME
arrays
json
winapi
jsviews
freepascal
paramiko
steam
propertygrid
jrebel
tizen-wearable-sdk
docker-windows
avl-tree
subquery
rfid
uiscrollview
ctypes
ida
redux-observable
anychart
ms-access-2007
thumbnails
marathon
apple-tv
multiplayer
bootstrap-typeahead
philips-hue
java-ee-7
ui5
ggmap
system.data.sqlite
dpi
superagent
xor
getjson
body-parser
phpspreadsheet
parse-android-sdk
ntfs-mft
exiftool
microdata
pdftk
service-fabric-stateful
jdbi
upsert
openweathermap
nsjsonserialization
persistent
volume
photography
python-hypothesis
teiid
rxvt
gulp-typescript
rsqlite
payu
chessboard.js
activeweb
wcf-ria-services
zurb-foundation-apps
fps
faraday
spinlock
search-regex
asp.net-mvc-2
handlebars.java
galaxy
drf-nested-routers
enyo
retro-computing
python-winshell
vine
criteria-api
rspec3
rhel5
temp-tables
fragment-tab-host
collabnet
ember-components
dalekjs
dache
sgml
bsod
jquery-tabs
opendata
document-database
cdata
modeshape
installshield-2009
swrl
magickwand
fluidsynth
transitive-closure-table
android-4.0
dropdownlistfor
xgettext
sunspot-rails
wcf-web-api
querystringparameter
executable-format
phpcrawl
j-interop
hibernate3-maven-plugin
oggvorbis
revision
handheld

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App