ng-uikit-pro-standard SCSS

Topic: ng-uikit-pro-standard SCSS

Burt du Preez pro asked 6 years 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?

Add comment

Burt du Preez pro answered 6 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear Burt du Preez, Please show me your angular.json, app.module and package.json files. Regards, Arek

Burt du Preez pro commented 6 years ago

Files added to the post below

Add comment

Burt du Preez pro answered 6 years ago

0 0 Best answer

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

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Burt du Preez pro answered 6 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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.

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

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: All
Browser: All
OS: Windows 10
Provided sample code: Yes
Provided link: No

Burt du Preez

Pro User

40Support score
1Questions 3Answers

0Snippets likes 0Snippets