mdbootstrap / mdb4-angular-ui-kit

Angular Bootstrap with Material Design - Powerful and free UI KIT
https://mdbootstrap.com/docs/angular/
MIT License
18 stars 1 forks source link

[BUG] mdb-angular-ui-kit installation fails on non-SCSS project #3

Closed julianpoemp closed 3 years ago

julianpoemp commented 3 years ago

I tried to install mdb-angular-kit to a test application that does not use SCSS. After the installation I tried to start the test application and got an error:

./src/styles.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-import: /Users/julian/repos/mdbTest/node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss Unknown word

> 1 | // CORE FUNCTIONS
    | ^
  2 | @import './bootstrap/functions';
  3 | @import './free/functions';

    at processResult (/Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:701:19)
    at /Users/julian/repos/mdbTest/node_modules/webpack/lib/NormalModule.js:807:5
    at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/julian/repos/mdbTest/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/julian/repos/mdbTest/node_modules/postcss-loader/dist/index.js:94:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)

Steps to reproduce

  1. ng new mdbTest
    ? Would you like to add Angular routing? No
    ? Which stylesheet format would you like to use? CSS
  2. cd mdbTest
  3. npm i mdb-angular-ui-kit
  4. ng add mdb-angular-ui-kit
    ? Import all MDB modules? Yes
    ? Set up Roboto Font? No
    ? Set up Angular browser animations? Yes
    ? Set up Font Awesome? No
    ? Set up Charts? No
  5. npm start. Error occurs.

If I look into the styles.css I see an SCSS import:

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

When I remove it, the application runs, but without any styles.

Expected behaviour

I expect that the toolkit works on non-SCSS projects and that all dependencies should be installed. E.g. if non-SCSS users need mdb-ui-kit it should be installed automatically. If non-SCSS users need additional styles placed to the angular.json, it should be placed automatically.

package.json

{
  "name": "mdb-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "mdb-angular-ui-kit": "^1.0.0-beta6",
    "mdb-ui-kit": "^3.8.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}
julianpoemp commented 3 years ago

found out that md5 is only working with scss. Migrated my project to SCCS, problem solved