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 for existing github project
How to pass config data to NgModule so NgModule will be compiled with AOT
Cloning a repo based on Angular CLI
How can I speed up Angular CLI Live Reload - 1-2 minutes per change
Generating a barrel when calling ng g component <myName>
Setting up tether-drop to work with angular-cli#1.0.0-beta.24
Angular CLI (AOT) gives error: ERROR in Cannot determine the module for class
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

Categories

HOME
meshlab
wsdl
nuxeo
codeeffects
couchdb-2.0
vlc
ext.net
pygame
vuex
finite-group-theory
uisplitviewcontroller
uicollectionview
atlassian-plugin-sdk
tweets
sql-update
explode
logarithm
printdocument
branch
ab-initio
gzip
skygear
data-extraction
qtablewidget
viewstate
honeysql
poco-libraries
delphi-10.1-berlin
linq-to-entities
onbackpressed
rich-text-editor
catia
vcf
lirc
range-v3
spring-data-hadoop
chrome-remote-desktop
android-bitmap
search-box
emgu
vici
gulp-typescript
keycode
cleditor
gradle-eclipse
shipitjs
android-recyclerview
sem
fabric-twitter
graphical-logo
twitter-rest-api
searchkick
ticket-system
java-melody
sysctl
dto
argument-passing
leptonica
dllexport
entity-framework-4.1
pep8
objcmongodb
qt4.6
wpdb
dynamic-data
git-filter-branch
web-safe-fonts
xgettext
radchart
nsindexpath
zookeeper
posting
scalaxb
nagle
pantheios
j-interop
yajl

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