我一直有node-sass在“npm安装”过程中做各种愚蠢的事情的问题,包括但不限于:
- GNU c++编译一些东西(可能是它自己)
- 运行Python 2.7
- 尝试运行任何其他版本的python
- 尝试连接到github
这在公司环境中造成了问题,我必须在Jenkins上编译我的项目,其中NPM库必须从公司服务器上的npm注册表的克隆中提取,并且只有该特定项目的严格必需品才可在dockers上使用,因此:
- 没有Github
- 没有python
- 没有c++
我决定我已经受够了node-sass的诡计,所以我尝试了建议的“dart-sass”,因为它的概念似乎是完全与Angular 兼容的,旨在解决node-sass的大部分问题:https://sass-lang.com/dart-sass
我试着删除node-sass并将dart-sass替换为它:
npm remove node-sass
npm install dart-sass
ng serve
但这会导致:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
为项目中的每一个部分。
为什么它还在寻找节点-sass?
下面是我的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"
}
}
下面是我的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"
}
}
}
这是如何在dart(js框架)下添加sass的,顺便说一句:Is Dart integrated with SASS?
但是该方法不适用于Angular 。
更新:
我试着用这个:How to find reverse dependencies on npm package?
尽管我尽了最大的努力,我还是想弄清楚什么是依赖/拉节点-sass,结果是:@angular-devkit/build-angular
但如果我把它去掉,那么服务器就不高兴了。它说它需要它。
2条答案
按热度按时间5kgi1eie1#
顺便说一句,为了让angular 7.x使用
sass
包,而不是尝试安装node-sass,我不得不:1.从我的package.json中删除
@angular-devkit/build-angular
1.删除节点模块
1.在
@angular-devkit/build-angular
的0.13.10中添加回package.json1.重新安装npm
k2fxgqgv2#
@angular-devkit/build-angular
支持dart sass,只是你用错了模块。尝试将npm install sass
与dart-sass
并列。查看来源:
https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f#diff-ff774aa928bd65a16935803c1c195c0165ea729446d11ae336b5afab999bc6a2R206