[英]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 :在“npm install”期间,我一直在用 node-sass 做各种愚蠢的事情,包括但不限于:
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 :这在企业环境中造成了问题,我必须在 Jenkins 上编译我的项目,其中 NPM 库必须从企业服务器上的 npm 注册表克隆中提取,并且只有该特定项目的严格必需品在 docker 上可用,因此:
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我决定我已经受够了 node-sass 的恶作剧,所以我尝试了建议的“dart-sass”,因为这个概念似乎是完全兼容角度的,旨在解决 node-sass 的大部分问题: https://sass-lang.com/dart-sass
I tried removing node-sass and placing dart-sass in it's stead :我尝试删除 node-sass 并将 dart-sass 代替:
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?为什么它仍在寻找 node-sass?
here's my package.json :这是我的 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 :这是我的 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?这就是在 dart(js 框架)下添加 sass 的方法,顺便说一句: Dart 是否与 SASS 集成?
but the method doesn't apply for angular.但该方法不适用于角度。
I tried using this : How to find reverse dependencies on npm package?我尝试使用这个: 如何找到 npm 包的反向依赖关系?
to figure out what was depending/pulling node-sass despite my best efforts and it turns out that was : @angular-devkit/build-angular尽管我尽了最大的努力,但还是要弄清楚什么是依赖/拉动 node-sass 的,结果是:@angular-devkit/build-angular
but if I remove that then the ng serve is unhappy.但是如果我删除它,那么 ng 服务就不开心了。 it says it needs it.
它说它需要它。
FWIW, in order to get angular 7.x to use the sass
package and not try to install node-sass, I had to: FWIW,为了让 angular 7.x 使用
sass
包而不是尝试安装 node-sass,我不得不:
@angular-devkit/build-angular
from my package.json@angular-devkit/build-angular
@angular-devkit/build-angular
to package.json@angular-devkit/build-angular
devkit @angular-devkit/build-angular
的 0.13.10 添加回 package.json@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
. @angular-devkit/build-angular
支持 dart sass,只有您使用了错误的模块,请尝试将npm install sass
与dart-sass
。
You can see the source code that will confirm this here: https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f您可以在此处查看确认这一点的源代码: https : //github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.