ERROR in material-dashboard.scss & Module build failed mini-css-extract-plugin and sass-loader

[aymanpsu]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [yes] I am running the latest version
• [yes] I checked the documentation and found no answer
• [yes] I checked to make sure that this issue has not already been filed
• [yes] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

build --prod for project
Please describe the behavior you are expecting
should done build without any errorr

Current Behavior

What is the current behavior?
I can not build project. I have erorr in material-dashboard.scss

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create new project by angular-cli
2. Put all dependencies path in angular.json
3. Download needed dependencies by npm
4. copy assets files to my project
5. problem in scss/material-dashboard.scss bcause I build project each time to see where problrm
6. I got error in scss/material-dashboard.scss
   Module build failed mini-css-extract-plugin
   Module build failed sass-loader

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device: Macbook pro 15 inch 2018
• Operating System: MacOS
• Browser and Version:

Failure Logs

ERROR in ./src/assets/scss/material-dashboard.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@include form-validation-state("valid", $label-color);
        ^
  Mixin form-validation-state is missing argument $icon.
  in /Users/ayman/Documents/Angular/Ptway/src/assets/scss/core/mixins/_forms.scss (line 159, column 14)
at runLoaders (/Users/ayman/Documents/Angular/Ptway/node_modules/webpack/lib/NormalModule.js:301:20)
at /Users/ayman/Documents/Angular/Ptway/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/ayman/Documents/Angular/Ptway/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/ayman/Documents/Angular/Ptway/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/Users/ayman/Documents/Angular/Ptway/node_modules/sass-loader/lib/loader.js:52:13)
at Object.done [as callback] (/Users/ayman/Documents/Angular/Ptway/node_modules/neo-async/async.js:8077:18)
at options.error (/Users/ayman/Documents/Angular/Ptway/node_modules/node-sass/lib/index.js:294:32)

Please include any relevant log snippets or files here.
image for error
https://ibb.co/r0vfJjY

[sylvaingirardbe]

Same issue here. Also on a MacBook.

npm: 6.7.0
node: 10.15.1

package.json:

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "test": "jest --watch",
    "test-debug": "jest --debug",
    "test-coverage": "jest --coverage",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.3",
    "@angular/cdk": "^7.3.0",
    "@angular/common": "^7.2.3",
    "@angular/compiler": "^7.2.3",
    "@angular/core": "^7.2.3",
    "@angular/forms": "^7.2.3",
    "@angular/http": "^7.2.3",
    "@angular/material": "^7.3.0",
    "@angular/platform-browser": "^7.2.3",
    "@angular/platform-browser-dynamic": "^7.2.3",
    "@angular/platform-server": "^7.2.3",
    "@angular/router": "^7.2.3",
    "@auth0/angular-jwt": "^2.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
    "@ngrx/effects": "^7.2.0",
    "@ngrx/router-store": "^7.2.0",
    "@ngrx/schematics": "^7.2.0",
    "@ngrx/store": "^7.2.0",
    "@ngrx/store-devtools": "^7.2.0",
    "@nguniversal/module-map-ngfactory-loader": "^7.0.2",
    "ajv": "^6.5.2",
    "angular-calendar": "^0.25.2",
    "animate.css": "^3.6.1",
    "arrive": "^2.4.1",
    "auth0-js": "^9.10.0",
    "auth0-lock": "^11.14.0",
    "bootstrap": "^4.1.1",
    "bootstrap-material-design": "^4.1.1",
    "bootstrap-notify": "^3.1.3",
    "bootstrap-rtl": "^3.3.4",
    "bootstrap-select": "^1.13.1",
    "bootstrap-tagsinput": "^0.7.1",
    "chartist": "0.11.0",
    "chartist-plugin-zoom": "^0.4.1",
    "classlist.js": "1.1.20150312",
    "core-js": "^2.5.4",
    "datatables": "^1.10.18",
    "datatables.net-bs": "^1.10.19",
    "datatables.net-responsive": "^2.2.3",
    "fullcalendar": "^3.9.0",
    "googleapis": "28.1.0",
    "hammerjs": "2.0.8",
    "jasny-bootstrap": "^3.1.3",
    "jquery": "3.2.1",
    "jquery-validation": "^1.17.0",
    "jqvmap": "^1.5.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.21",
    "ng2-nouislider": "^1.7.13",
    "ng2-select": "^2.0.0",
    "ngrx-store-freeze": "^0.2.2",
    "ngrx-store-localstorage": "^7.0.0",
    "ngx-chips": "^2.0.0-beta.0",
    "nouislider": "^11.1.0",
    "perfect-scrollbar": "1.1.0",
    "popper.js": "1.14.3",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.2.1",
    "socket.io": "^2.1.1",
    "sweetalert2": "^8.0.5",
    "ts-jest": "^23.10.5",
    "ts-loader": "^5.3.0",
    "twitter-bootstrap-wizard": "^1.2.0",
    "uglify-js": "^3.4.3",
    "uuid": "^3.3.2",
    "validate": "^4.4.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~7.3.0",
    "@angular/compiler-cli": "^7.2.3",
    "@angular/language-service": "^7.2.3",
    "@microsoft/microsoft-graph-types": "^1.5.0",
    "@types/bootstrap": "3.3.32",
    "@types/chartist": "0.9.34",
    "@types/googlemaps": "^3.30.8",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/jest": "^23.1.1",
    "@types/jquery": "1.10.31",
    "@types/node": "~8.9.4",
    "@types/socket.io-client": "^1.4.32",
    "@types/socket.io": "^1.4.33",
    "@types/uuid": "^3.4.4",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.1.0",
    "jasmine-marbles": "^0.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "jest": "^24.0.0",
    "jest-preset-angular": "^6.0.2",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "protractor": "^5.3.2",
    "rxjs-tslint": "^0.1.5",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.2.4",
    "webpack-cli": "^3.1.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/setup-jest.ts",
    "collectCoverage": false,
    "coverageDirectory": "<rootDir>/coverage/",
    "collectCoverageFrom": [
      "**/*.{js,ts}",
      "!**/node_modules/**",
      "!**/vendor/**",
      "!**/coverage/**",
      "!**/e2e/**",
      "!**/*.d.ts",
      "!**/*.module.ts",
      "!**/*.conf.{js,ts}",
      "!**/src/*",
      "!**/src/assets/**",
      "!**/src/environments/**",
      "!jestGlobalMocks.ts",
      "!setup-jest.ts",
      "!tests.js"
    ]
  }
}

[sylvaingirardbe]

@aymanpsu , I fixed it by doing @include form-validation-state("valid", $label-color, $form-feedback-icon-valid); instead of @include form-validation-state("valid", $label-color); in _forms.scsss. This is caused by a recent change in bootstrap. Alternatively you could fix your bootstrap version at ~4.1.x.

[Spomky]

Hi,

I am facing the same issue. Thank you @sylvaingirardbe for providing a way to fix that.
The proposed alternative (set bootstrap version to ~4.1) should not be followed as there is a security issue with all releases between 4.0 and <4.3.1.

Looking forward to see this definitely fixed here.

[bashman1]

@aymanpsu , I fixed it by doing @include form-validation-state("valid", $label-color, $form-feedback-icon-valid); instead of @include form-validation-state("valid", $label-color); in _forms.scsss. This is caused by a recent change in bootstrap. Alternatively you could fix your bootstrap version at ~4.1.x.

I had the same issue and that method fixed it