在我的angular-cli项目中从node-sass切换到dart sass [英] Switching from node-sass to dart sass in my angular-cli project
问题描述
在"npm安装"过程中，node-sass在进行各种愚蠢操作时一直遇到问题，包括但不限于:
I've been having issues with node-sass doing all manner of silliness during "npm install" including but not limited to :
- GNU c ++进行编译(可能是本身)
- 尝试运行python2.7
- 尝试运行任何其他版本的python
- 尝试连接到github
这在公司环境中造成了问题，我必须在Jenkins上编译我的项目，其中必须从公司服务器上npm注册表的克隆中提取NPM库，并且泊坞窗上只有该特定项目的严格必要性所以:
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 :
- 没有github
- 没有python
- 没有c ++
并且我决定我已经有足够的node-sass的恶作剧，所以我尝试了建议的"dart-sass"，因为这种想法似乎是完全与角度兼容的，并且旨在解决大多数问题.node-sass: https://sass-lang.com/dart-sass
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代替了它:
I tried removing node-sass and placing dart-sass in it's stead :
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'
针对项目中的每个组件.
for every component in the project.
为什么它仍在寻找node-sass?
why is it still looking for node-sass?
这是我的package.json:
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"
}
}
这是我的angular.json:
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"
}
}
}
这就是在dart(js框架)下添加sass的方式，顺便说一句:是Dart与SASS集成在一起?
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.
我尝试使用以下方法:如何查找对npm包的反向依赖关系?
I tried using this : How to find reverse dependencies on npm package?
找出尽管我已尽力而为，但仍在依赖/拉动节点的问题，结果是:@ angular-devkit/build-angular
to figure out what was depending/pulling node-sass despite my best efforts and it turns out that was : @angular-devkit/build-angular
但是，如果我删除该消息，则ng服务并不满意.它说需要它.
but if I remove that then the ng serve is unhappy. it says it needs it.
推荐答案
@ angular-devkit/build-angular 支持dart sass，只有您使用的模块错误，请尝试与. dart-sass 相对应的> npm install sass
@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.
您可以在此处查看将确认此内容的源代码: https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f
You can see the source code that will confirm this here: https://github.com/angular/angular-cli/pull/11791/commits/2c26bce9a5e2472239d755f585df9458f28b9b7f
这篇关于在我的angular-cli项目中从node-sass切换到dart sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
