Switching from node-sass to dart sass in my angular-cli project
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
FWIW, in order to get angular 7.x to use the sass package and not try to install node-sass, I had to:
- remove
@angular-devkit/build-angularfrom my package.json - delete node_modules
- npm install
- npm i -D sass
- add back in the 0.13.10 of
@angular-devkit/build-angularto package.json - npm install again.