how to show css white skin in my angular project

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

tonyha premium asked 6 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 6 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 6 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...

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...

Please insert min. 15 characters.

Add comment

tonyha premium answered 6 years ago

0 0 Best answer

Hi, Here is angular.json installed mdb pro:

I hope you can give a clue to solve my problem.

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

Please insert min. 20 characters.

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 6 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

Add comment

tonyha premium answered 6 years ago

0 0 Best answer

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

Add comment

tonyha premium answered 6 years ago

0 0 Best answer

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!

Add comment

tonyha premium answered 6 years ago

0 0 Best answer

----------------- 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 <a href="http://localhost:4200/" rel="nofollow">http://localhost:4200/</a> **
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…

Please insert min. 20 characters.

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 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

tonyha

Premium support 20Support score
8Questions 5Answers 0Snippets