error while npm start getting error of sass-loader

Question

Error:

ERROR in ./src/assets/scss/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/dist/cjs.js??ref--14-3!./src/assets/scss/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

      @for $i from 1 through $grid-row-columns {
                            ^
      Undefined variable: "$grid-row-columns".
      in C:\Users\node_modules\bootstrap\scss\mixins\_grid-framework.scss (line 37, column 30)

package.json

{
    "name": "r",
    "version": "1.2.91-SNAPSHOT",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng serve --base-href=/abc/  --disableHostCheck=true",
        "start:dev": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng serve --aot --base-href=/abc/ --disableHostCheck=true",
        "build": "webpack",
        "test": "karma start ./karma.conf.js",
        "test:dev": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng test  --code-coverage",
        "lint": "ng lint",
        "deploy:dev": "node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng serve --configuration=dev --base-href=/abc/  --disableHostCheck=true",
        "start:webpack": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 4200 --environment prod",
        "e2e": "protractor ./protractor.conf.js",
        "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
    },
    "private": false,
    "dependencies": {
        "@angular/animations": "^7.2.8",
        "@angular/cdk": "^7.3.4",
        "@angular/common": "^7.2.8",
        "@angular/compiler": "^7.2.8",
        "@angular/core": "^7.2.8",
        "@angular/forms": "^7.2.8",
        "@angular/http": "^7.2.8",
        "@angular/material": "^7.3.4",
        "@angular/platform-browser": "^7.2.8",
        "@angular/platform-browser-dynamic": "^7.2.8",
        "@angular/router": "^7.2.8",
        "@babel/polyfill": "^7.2.3",
        "@ng-bootstrap/ng-bootstrap": "^4.1.0",
        "@ng-idle/core": "^7.0.0-beta.1",
        "@ng-idle/keepalive": "^7.0.0-beta.1",
        "@ngrx/entity": "7.0.0",
        "@ngrx/store": "7.0.0",
        "@ngrx/store-devtools": "7.0.0",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "@swimlane/ngx-datatable": "14.0.0",
        "angular-font-awesome": "^3.1.2",
        "angular-particle": "^1.0.4",
        "angular2-hotkeys": "^2.1.4",
        "angular2-jwt": "^0.2.3",
        "angular2-moment": "^1.8.0",
        "apollo-angular": "1.5.0",
        "apollo-angular-link-http": "^1.4.0",
        "apollo-cache-inmemory": "^1.5.1",
        "apollo-client": "^2.5.1",
        "apollo-link": "^1.2.9",
        "apollo-link-error": "^1.1.8",
        "bootstrap": "^4.4.1",
        "classlist.js": "^1.1.20150312",
        "core-js": "^2.6.5",
        "electron-to-chromium": "^1.3.134",
        "font-awesome": "^4.7.0",
        "graphql": "^14.1.1",
        "graphql-tag": "^2.10.1",
        "igniteui-angular": "5.2.0-beta.0",
        "jwt-decode": "^2.2.0",
        "ng2-cookies": "1.0.12",
        "ng2-trim-directive": "^2.1.2",
        "ng2-validation": "^4.2.0",
        "ngx-pagination": "^3.2.1",
        "ngx-perfect-scrollbar": "^7.1.0",
        "ngx-slick-carousel": "^0.4.4",
        "ngx-snackbar": "^2.0.1",
        "particles.js": "^2.0.0",
        "primeng": "^7.0.5",
        "rxjs": "^6.5.1",
        "serve": "^10.1.2",
        "slick-carousel": "^1.8.1",
        "stickyfill": "^1.1.1",
        "sweetalert2": "^7.22.2",
        "tslib": "^1.9.0",
        "unsubscribe-all": "1.4.0",
        "web-animations-js": "^2.1.5",
        "zone.js": "^0.8.29"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.13.9",
        "@angular-devkit/core": "^7.3.5",
        "@angular/cli": "^7.3.5",
        "@angular/compiler-cli": "^7.2.8",
        "@angular/language-service": "^7.2.8",
        "@types/jasmine": "^3.3.8",
        "@types/jasminewd2": "^2.0.2",
        "@types/lodash": "^4.14.122",
        "@types/node": "^10.12.30",
        "@types/uuid": "^3.4.4",
        "autoprefixer": "^9.4.10",
        "circular-dependency-plugin": "^5.0.2",
        "codelyzer": "^4.0.1",
        "copy-webpack-plugin": "^4.6.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^3.0.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "istanbul-instrumenter-loader": "^3.0.0",
        "jasmine-core": "^3.3.0",
        "jasmine-spec-reporter": "^4.2.1",
        "jquery": "^3.4.1",
        "karma": "^4.0.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-coverage-istanbul-reporter": "^2.0.5",
        "karma-firefox-launcher": "^1.1.0",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "karma-parallel": "^0.3.1",
        "karma-phantomjs-launcher": "^1.0.4",
        "less-loader": "^4.0.5",
        "ngx-bootstrap": "^4.1.0",
        "postcss-import": "^12.0.1",
        "postcss-url": "^8.0.0",
        "protractor": "^5.4.1",
        "raw-loader": "^1.0.0",
        "sonarqube-scanner": "^2.4.0",
        "specgen": "^1.3.1",
        "style-loader": "^0.23.1",
        "stylus-loader": "^3.0.1",
        "ts-node": "^7.0.1",
        "tslint": "^5.13.1",
        "typescript": "3.2.2",
        "uglifyjs-webpack-plugin": "^2.1.2",
        "url-loader": "^1.1.2",
        "webpack-bundle-analyzer": "^3.3.2",
        "webpack-dev-server": "^3.2.1",
        "webpack-merge": "^4.1.5"
    }
}

Answer 1

try below steps;

Try 1

npm install node-sass

Try 2

remove node_modules folder and run npm install

Try 3

npm rebuild node-sass

Try 4

npm install --save node-sass

Answer 2

You need to downgrade your bootstrap to 4.3.1 Steps: 1. Remove bootstrap - npm uninstall bootstrap 2. Install Bootstrap 4.3.1 - npm install bootstrap@4.3.1

Answer 3

Not clear what have you done prior to getting this error. Please try to be more specific. As for this generic question here is the generic answer:

1. Check that you run npm install from correct location. It is pretty obvious, but somethime things happen.
2. Make sure you run npm start from correct folder.
3. look for definition of "$grid-row-columns", I mean that _grid-framework.scss frobably reference other file wher this variable is defined.

Good luck!