Switching from node-sass to dart sass in my angular-cli project

Question

I've been having issues with node-sass doing all manner of silliness during "npm install" including but not limited to :

• GNU c++ compiling something (likely itself)
• trying to run python2.7
• trying to run any other version of python
• trying to connect to github

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 :

• no github
• no python
• no c++

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 : https://sass-lang.com/dart-sass

I tried removing node-sass and placing dart-sass in it's stead :

npm remove node-sass npm install dart-sass ng serve 

but this causes :

Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' 

for every component in the project.

why is it still looking for node-sass?

here's my package.json :

{   "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"   } } 

here's my angular.json :

{   "$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"     }   } } 

this is how adding sass under dart (the js framework) is done, btw : Is Dart integrated with SASS?

but the method doesn't apply for angular.

Update :

I tried using this : How to find reverse dependencies on npm package?

to figure out what was depending/pulling node-sass despite my best efforts and it turns out that was : @angular-devkit/build-angular

but if I remove that then the ng serve is unhappy. it says it needs it.

Answer 1

FWIW, in order to get angular 7.x to use the sass package and not try to install node-sass, I had to:

1. remove @angular-devkit/build-angular from my package.json
2. delete node_modules
3. npm install
4. npm i -D sass
5. add back in the 0.13.10 of @angular-devkit/build-angular to package.json
6. npm install again.

Answer 2

@angular-devkit/build-angular has support for dart sass, only you're using the wrong module, try npm install sass as apposed to dart-sass.

You can see the source code that will confirm this here: https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f