title: Switching from node-sass to dart sass in my angular-cli project
body: <p>I've been having issues with node-sass doing all manner of silliness during "npm install" including but not limited to : </p>
  
  <ul>
  <li>GNU c++ compiling something (likely itself)</li>
  <li>trying to run python2.7</li>
  <li>trying to run any other version of python</li>
  <li>trying to connect to github</li>
  </ul>
  
  <p>and this was posing problems in a corporate context where I have to compile my project on Jenkins where NPM libraries must be pulled from a clone of npm registry on corporate servers and only the strict necessities of that specific project are available on the dockers so :</p>
  
  <ul>
  <li>no github</li>
  <li>no python </li>
  <li>no c++</li>
  </ul>
  
  <p>and I'd decided I'd had enough of node-sass's shenanigans so I tried the suggested "dart-sass" since the notion seems to be that it is entirely angular-compatible and aims to solve most of the issues with node-sass : <a href="https://sass-lang.com/dart-sass" rel="noreferrer">https://sass-lang.com/dart-sass</a></p>
  
  <p>I tried removing node-sass and placing dart-sass in it's stead : </p>
  
  <pre><code>npm remove node-sass
  npm install dart-sass
  ng serve
  </code></pre>
  
  <p>but this causes :</p>
  
  <pre><code>Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Error: Cannot find module 'node-sass'
  </code></pre>
  
  <p>for every component in the project.</p>
  
  <p>why is it still looking for node-sass?</p>
  
  <p>here's my package.json :</p>
  
  <pre><code>{
    "name": "web.ui",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve --aot=false --proxy-config proxy.json",
      "build": "ng b --prod",
      "builden": "ng b --prod --configuration=en",
      "buildde": "ng b --prod --configuration=de",
      "test": "ng test",
      "lint": "ng lint",
      "ngc": "ngc"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^7.0.3",
      "@angular/cdk": "^7.0.3",
      "@angular/common": "^7.0.3",
      "@angular/compiler": "^7.0.3",
      "@angular/core": "^7.0.3",
      "@angular/forms": "^7.0.3",
      "@angular/http": "^7.0.3",
      "@angular/material": "^7.0.3",
      "@angular/material-moment-adapter": "^7.0.3",
      "@angular/platform-browser": "^7.0.3",
      "@angular/platform-browser-dynamic": "^7.0.3",
      "@angular/router": "^7.0.3",
      "@ngx-translate/core": "^11.0.0",
      "@ngx-translate/http-loader": "^4.0.0",
      "@ngx-translate/i18n-polyfill": "^1.0.0",
      "@types/underscore": "^1.8.7",
      "angular-font-awesome": "^3.1.2",
      "bootstrap": "^4.1.1",
      "classlist.js": "^1.1.20150312",
      "core-js": "^2.5.3",
      "dart-sass": "^1.15.0",
      "dom-autoscroller": "^2.3.4",
      "file-saver": "^2.0.0-rc.4",
      "font-awesome": "^4.7.0",
      "iconv-lite": "^0.4.23",
      "lodash": "^4.17.5",
      "moment": "^2.22.2",
      "ng-snotify": "^4.3.1",
      "ng2-ion-range-slider": "^2.0.0",
      "ngx-bootstrap": "^3.1.1",
      "popper.js": "^1.14.3",
      "rxjs": "^6.2.0",
      "typescript": "3.1.6",
      "underscore": "^1.9.1",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.20"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.10.0",
      "@angular/cli": "^7.0.5",
      "@angular/compiler-cli": "^7.0.3",
      "@angular/language-service": "^7.0.3",
      "@types/jasmine": "^2.8.9",
      "@types/jasminewd2": "~2.0.5",
      "@types/node": "~10.12.1",
      "codelyzer": "^4.5.0",
      "postcss-modules": "^1.4.1",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.1",
      "tslint": "~5.11.0"
    }
  }
  </code></pre>
  
  <p>here's my angular.json : </p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "web.ui": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist",
              "index": "src/index.html",
              "main": "src/main.ts",
              "tsConfig": "src/tsconfig.app.json",
              "polyfills": "src/polyfills.ts",
              "assets": [
                "src/assets",
                "src/favicon.ico",
                "src/assets/images"
              ],
              "styles": [
                "node_modules/ng-snotify/styles/simple.scss",
                "node_modules/ion-rangeslider/css/ion.rangeSlider.css",
                "node_modules/font-awesome/css/font-awesome.css",
                "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/app/logged.in/content/routing/common/styles/ion.slider.style.scss",
                "src/styles.scss"
              ],
              "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"
              ]
            },
            "configurations": {
              "en": {
                "aot": true,
                "outputPath": "dist/en/",
                "i18nFile": "src/assets/i18n/en.xlf",
                "i18nFormat": "xlf",
                "i18nLocale": "en",
                "i18nMissingTranslation": "error"
              },
              "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
              },
              "production-en": {
                "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,
                "outputPath": "dist/my-project-en/",
                "i18nFile": "src/assets/i18n/en.xlf",
                "i18nFormat": "xlf",
                "i18nLocale": "en",
                "i18nMissingTranslation": "error"
              },
              "production-de": {
                "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,
                "outputPath": "dist/my-project-en/",
                "i18nFile": "src/assets/i18n/de.xlf",
                "i18nFormat": "xlf",
                "i18nLocale": "en",
                "i18nMissingTranslation": "error"
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "web.ui:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "web.ui:build:production"
              },
              "en": {
                "browserTarget": "web.ui:build:en"
              },
              "production-en": {
                "browserTarget": "web.ui:build:production-en"
              },
              "production-de": {
                "browserTarget": "web.ui:build:production-de"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "web.ui:build"
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "web.ui-e2e": {
        "root": "",
        "sourceRoot": "",
        "projectType": "application"
      }
    },
    "defaultProject": "web.ui",
    "cli": {
      "warnings": {
        "typescriptMismatch": false
      }
    },
    "schematics": {
      "@schematics/angular:component": {
        "prefix": "app",
        "styleext": "scss"
      },
      "@schematics/angular:directive": {
        "prefix": "app"
      }
    }
  }
  </code></pre>
  
  <p>this is how adding sass under dart (the js framework) is done, btw : <a href="https://stackoverflow.com/questions/41603180/is-dart-integrated-with-sass">Is Dart integrated with SASS?</a></p>
  
  <p>but the method doesn't apply for angular.</p>
  
  <h2>Update :</h2>
  
  <p>I tried using this : <a href="https://stackoverflow.com/questions/31923195/how-to-find-reverse-dependencies-on-npm-package">How to find reverse dependencies on npm package?</a></p>
  
  <p>to figure out what was depending/pulling node-sass despite my best efforts and it turns out that was : @angular-devkit/build-angular</p>
  
  <p>but if I remove that then the ng serve is unhappy. it says it needs it.</p>