ng-uikit-pro-standard SCSS

web
mobile

Topic: ng-uikit-pro-standard SCSS

Burt du Preez pro asked a year ago

I've setup a new Angular MDB Pro project using https://mdbootstrap.com/docs/angular/getting-started/quick-start/ Specifically I've added  
"styles": [
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/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"
]
As instructed. When the page is served, both styles.scss and font-awesome.scss are rendered in <style type="text/css"></style> tags as expected. But neither mdb.scss nor bootstrap.scss get rendered this way. They are also not rendered elsewhere as using any of the bootstrap or mdb css classes in the html simply do not work. To bypass this, though I'm sure this is not the right way to do it, I've added  
@import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss";
To the src/styles.scss file, which then adds bootstrap to the page (within the styles.scss file, which I figure is not best practise), but adding
@import "~ng-uikit-pro-standard/assets/scss/mdb.scss";
To the file causes the following error
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\fusio\Documents\git\leaderware-web\src\main\angular\dep\ng-uikit-pro-standard\assets\scss\angular\pro\_lightbox.scss:230:16: Can't resolve '../img/lightbox/default-skin.png' in 'C:\Users\fusio
\Documents\git\leaderware-web\src\main\angular\src'
  What is the correct way to add the required scss files to the page?

Burt du Preez pro answered a year ago

So I did a whole lot more messing around and the issue is indeed with my usage of file:./dep/ng-uikit-pro-standard When dependencies are referenced like this, npm creates a symlink in the node_modules folder. everything works find in general, but it seems webpack has an issue resolving these https://github.com/webpack/webpack/issues/811 Using the git link, or hard copying the files over in an npm postinstall script works to render the css as expected.
Dear Burt du Preez, Please show me your angular.json, app.module and package.json files. Regards, Arek

Burt du Preez pro commented a year ago

Files added to the post below


Burt du Preez pro answered a year ago

angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../resources/public",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular: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": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/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"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/angular-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },
    "angular-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular"
}


package.json

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod && ng run angular:server && webpack --config webpack.config.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/platform-server": "~7.0.0",
    "@angular/pwa": "^0.10.4",
    "@angular/router": "~7.0.0",
    "@angular/service-worker": "~7.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^7.0.2",
    "@types/chart.js": "^2.7.40",
    "angular5-csv": "^0.2.10",
    "bundle-loader": "^0.5.6",
    "chart.js": "^2.5.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard": "file:./dep/ng-uikit-pro-standard",
    "rxjs": "~6.3.3",
    "screenfull": "^3.3.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "^7.0.4",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-loader": "^5.3.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1",
    "webpack-cli": "^3.1.2"
  }
}


app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
import {MDBBootstrapModulesPro} from "ng-uikit-pro-standard";
import {AgmCoreModule} from "@agm/core";
import {InfoModule} from "./info/info.module";
import {SharedModule} from "./shared/shared.module";
import {CoreModule} from "./core/core.module";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    InfoModule,
    SharedModule,
    CoreModule,
    MDBBootstrapModulesPro.forRoot(),
    AgmCoreModule.forRoot({apiKey: 'Your_api_key'}),
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Burt du Preez pro commented a year ago

It's the angular.json, then packages.json then app.module.ts


ng-uikit-pro-standard: file:./dep/ng-uikit-pro-standard - this line was by default in your package.json or did you change it later? Please make sure that MDB files are installed correctly in node_modules/ng-uikit-pro-standard. You can also try do downgrade to Angular 6 version. Our product doesn't support Angular 7 yet. Regards, Arek

Burt du Preez pro answered a year ago

I added that line, replacing the download from gitlab. There were some times the gitlab server was dead which messed with my builds so I have it available locally now to not have that dependency. Regardless the ng-uikit-pro-standard is correctly in node_modules, with the scss folder in there. I'm able to use the Angular MDB directives, they just don't have any styling. I've also tried angular 5 and 6 with the same effect.
Please send me a demo app on which I would be albo to debug this problem (you can send it to a.idzikowski@mdbootstrap.com). I think it may be related to module organisation. Please try to add MDB import to your other modules (core/shared) and let me know if that help.
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 6.2.3
  • Device: All
  • Browser: All
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags