html - Angular won't load styles.css -



i'm building simple angular app bootstrap. seems base index.html won't load styles.css. if put css code right html tags works charm. tried reboot app , clear browser cache, seems ignore style file. when wrote css file first time worked, hence thought cache problem. changed nothing of angular project base structure.
here's code.

index.html

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>reagapp</title>   <base href="/">    <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body>   <div class="container">     <app-root></app-root>   </div> </body> </html>

styles.css

body {   background-color: #d9d9d9; }  .container{   width: 70%;   max-width: 100%;     background-color: white;     margin-left: auto;   margin-right: auto; }

here's version works instead.
index.html

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>reagapp</title>   <base href="/">    <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body style="  background-color: #d9d9d9;">   <div class="container"       style="width: 70%;       max-width: 100%;         background-color: white;         margin-left: auto;       margin-right: auto;">     <app-root></app-root>   </div> </body> </html>

.angular-cli.json

[other things]     "prefix": "app",           "styles": [             "styles.css",             "../node_modules/bootstrap/dist/css/bootstrap.min.css",             "../node_modules/font-awesome/css/font-awesome.css"           ],           "scripts": [             "../node_modules/jquery/dist/jquery.min.js",             "../node_modules/tether/dist/js/tether.min.js",             "../node_modules/bootstrap/dist/js/bootstrap.min.js"           ],           "environmentsource": "environments/environment.ts", [other things]

the code pretty trivial still.
in advance.

you need reference stylesheet in yout .angular-cli.json :

"styles": [ "path/to/style.css" ],

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more