Topic: how to show css white skin in my angular project

tonyha premium asked 5 years ago


Hi, I just registered MDB pro and tried to show css white skin in my angular project. It did not show anything on browser. I put css white skin in index.html <body class="white-skin">  after installing MDB pro. It is really frustrating to me. 

Damian Gemza staff commented 5 years ago

Dear tonyha, Do other skins work for you, or not? Did you follow every step of our 5min-quickstart guide carefully? https://mdbootstrap.com/getting-started/5min-quickstart/ Best Regards, Damian

tonyha premium commented 5 years ago

Yes, I did I think css is not working. When I put styles in angular.json, it give this wraning message. I think everything is fine except css. I have tried other components, it works fine but not css like animation effect.. ui-iMac:examSimulator-ver.1.0.0 incheolha$ ng serve --o ** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ ** 69% building modules 563/565 modules 2 active …ro/assets/scss/bootstrap/bootstrap.scssWARNING: The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5. on line 10 of node_modules/ng-mdb-pro/assets/scss/bootstrap/mixins/_text-hide.scss, in mixin `text-hide` from line 57 of node_modules/ng-mdb-pro/assets/scss/bootstrap/utilities/_text.scss from line 14 of node_modules/ng-mdb-pro/assets/scss/bootstrap/_utilities.scss from line 41 of stdin Date: 2018-05-11T07:35:30.303Z Hash: 056d7684227b76fb2942 Time: 17020ms chunk {main} main.js, main.js.map (main) 17.2 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 394 kB [rendered] chunk {styles} styles.js, styles.js.map (styles) 855 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.81 MB [initial] [rendered] ℹ 「wdm」: Compiled successfully. ℹ 「wdm」: Compiling...

tonyha premium answered 5 years ago


Hi, Here is angular.json installed mdb pro: I hope you can give a clue to solve my problem. ~~~~~~~~~ angular.json ~~~~~~~~~~~~~
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"examSim-AngularCli60-Express": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/ng-mdb-pro/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-mdb-pro/assets/scss/mdb.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/screenfull/dist/screenfull.js",
"node_modules/hammerjs/hammer.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "examSim-AngularCli60-Express:build"
},
"configurations": {
"production": {
"browserTarget": "examSim-AngularCli60-Express:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "examSim-AngularCli60-Express:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"examSim-AngularCli60-Express-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "examSim-AngularCli60-Express:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"defaultProject": "examSim-AngularCli60-Express"
}

Damian Gemza staff commented 5 years ago

Could you send me your project at d.gemza@mdbootstrap.com ? I need to check your project, because in angular.json there's no problems. Best Regards, Damian

tonyha premium answered 5 years ago


Sorry!  Now, I am out, I will give you mdb pro angular.json files later.

 


tonyha premium answered 5 years ago


Thank you for your comments. However, despite I tried to use the command "ng set defaults.styleExt scss", it gets a error message like you can not use "ng set " anymore. So, I have use "ng config defaults.styleExt scss" as the suggested message from command line, but did give another error messages "it does not have value".  here is my angular.json:

Thank you!


tonyha premium answered 5 years ago


Yes, I did I think css is not working. When I put styles in angular.json, it give this wraning message. I think everything is fine except css. I have tried other components, it works fine but not css like animation effect. Also, I could not find where I have to put "styleExt": "css" to "styleExt": "scss"  in step 5 since I have using angular cli 6.0.0. Thank you I hope you can give a right solution. ----------------- warning message when I use ng serve --o ------ ui-iMac:examSimulator-ver.1.0.0 incheolha$ ng serve –o ** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ ** 69% building modules 563/565 modules 2 active …ro/assets/scss/bootstrap/bootstrap.scssWARNING: The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5. on line 10 of node_modules/ng-mdb-pro/assets/scss/bootstrap/mixins/_text-hide.scss, in mixin `text-hide` from line 57 of node_modules/ng-mdb-pro/assets/scss/bootstrap/utilities/_text.scss from line 14 of node_modules/ng-mdb-pro/assets/scss/bootstrap/_utilities.scss from line 41 of stdin Date: 2018-05-11T07:35:30.303Z Hash: 056d7684227b76fb2942 Time: 17020ms chunk {main} main.js, main.js.map (main) 17.2 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 394 kB [rendered] chunk {styles} styles.js, styles.js.map (styles) 855 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.81 MB [initial] [rendered] ℹ 「wdm」: Compiled successfully. ℹ 「wdm」: Compiling…

Damian Gemza staff commented 5 years ago

Those warnings won't produce you problems, because they're coming from Bootstrap. Could you show me your angular.json file? Try this command to change your styles from css to scss: ng set defaults.styleExt scss But remember to change every .component.css files to .component.scss! Best Regards, Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags