从 Angular 9 更新到 Angular 10 后，`SCSS` 不起作用
Posted
技术标签:
【中文标题】从 Angular 9 更新到 Angular 10 后，`SCSS` 不起作用【英文标题】：`SCSS` doesn't work after Updating from Angular 9 to Angular 10 【发布时间】：2021-01-02 22:21:59 【问题描述】：我将我的Angular 应用程序从版本 9 更新到了 10。在更新之前它工作正常。现在出现这个错误：
ERROR in ./src/assets/scss/argon.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/assets/scss/argon.scss)
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: custom/alert.
on line 5 of src/assets/scss/custom/_components.scss
from line 65 of src/assets/scss/argon.scss
>> @import "custom/alert";
我在*** 和GitHub 中尝试了很多答案，但对我没有帮助。
我附上了我的Angular.JSON 和Package.JSON：
angular.json：
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects":
"argon-dashboard-angular":
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics":
"@schematics/angular:component":
"styleext": "scss"
,
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"src/styles.scss",
"src/assets/scss/argon.scss",
"node_modules/sweetalert2/src/sweetalert2.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.min.js",
"node_modules/clipboard/dist/clipboard.min.js",
"node_modules/sweetalert2/dist/sweetalert2.js"
]
,
"configurations":
"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
,
"serve":
"builder": "@angular-devkit/build-angular:dev-server",
"options":
"browserTarget": "argon-dashboard-angular:build"
,
"configurations":
"production":
"browserTarget": "argon-dashboard-angular:build:production"
,
"extract-i18n":
"builder": "@angular-devkit/build-angular:extract-i18n",
"options":
"browserTarget": "argon-dashboard-angular:build"
,
"test":
"builder": "@angular-devkit/build-angular:karma",
"options":
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["src/styles.css"],
"scripts": [],
"assets": ["src/favicon.ico", "src/assets"]
,
"lint":
"builder": "@angular-devkit/build-angular:tslint",
"options":
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
,
"argon-dashboard-angular-e2e":
"root": "e2e/",
"projectType": "application",
"architect":
"e2e":
"builder": "@angular-devkit/build-angular:protractor",
"options":
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "argon-dashboard-angular:serve"
,
"configurations":
"production":
"devServerTarget": "argon-dashboard-angular:serve:production"
,
"lint":
"builder": "@angular-devkit/build-angular:tslint",
"options":
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
,
"defaultProject": "argon-dashboard-angular",
"schematics":
"@schematics/angular:component":
"styleext": "scss"
,
"cli":
"analytics": false
package.json：
"name": "argon-dashboard-angular", “版本”：“1.1.0”， “脚本”： “ng”：“ng”， “开始”：“ng服务”， “构建”：“ng构建”， “测试”：“ng测试”， “lint”：“ng lint”， “e2e”：“ng e2e”， “安装：清洁”：“rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start” , “私人”：真的， “依赖”： "@angular/animations": "10.1.1", "@angular/common": "10.1.1", "@angular/compiler": "10.1.1", "@angular/core": "10.1.1", "@angular/fire": "^6.0.2", "@angular/forms": "10.1.1", "@angular/http": "^7.2.16", "@angular/localize": "^9.0.5", "@angular/platform-browser": "10.1.1", "@angular/platform-browser-dynamic": "10.1.1", "@angular/路由器": "10.1.1", "@ckeditor/ckeditor5-angular": "^1.2.3", "@ckeditor/ckeditor5-build-classic": "^21.0.0", "@ng-bootstrap/ng-bootstrap": "^6.0.0", "@sweetalert2/ngx-sweetalert2": "^8.1.1", “角度文件上传器”：“^7.0.1”， “引导程序”：“^4.5.2”， "chart.js": "2.7.3", “剪贴板”：“2.0.4”， “核心-js”：“3.6.4”， “火力基地”：“^7.19.1”， “ngx剪贴板”：“13.0.0”， "ngx-quill": "^12.0.1", “ngx-toastr”：“12.0.0”， “nouislider”：“13.1.1”， “羽毛笔”：“^1.3.7”， "rxjs": "^7.0.0-beta.5", "sass-loader": "^10.0.2", "sweetalert2": "^10.0.2", “tslib”：“2.0.1”， “zone.js”：“0.11.1” , “开发依赖”： "@angular-devkit/build-angular": "0.1001.1", "@angular/cli": "^10.1.1", "@angular/compiler-cli": "^10.1.1", "@angular/language-service": "^10.1.1", "@types/jasmine": "^3.5.8", "@types/jasminewd2": "^2.0.8", "@types/node": "^13.7.7", "codelyzer": "^5.2.1", “茉莉花核”：“^3.5.0”， “茉莉花规格报告者”：“^4.2.1”， "业力": "^4.4.1", "karma-chrome-launcher": "^3.1.0", “业力覆盖伊斯坦布尔记者”：“^2.1.1”， “业力茉莉花”：“^3.1.1”， “karma-jasmine-html-reporter”：“^1.5.2”， “节点萨斯”：“^4.14.1”， “量角器”：“7.0.0”， “ts节点”：“9.0.0”， “tslint”：“6.1.3”， “打字稿”：“4.0.2”
【问题讨论】：
我遇到了这个错误，除了我的 sass 中有一个奇怪/隐藏的字符外，我从来没有弄清楚原因。尝试将其留空，它要么会在另一个 sass 上失败，要么会编译。如果它在另一个 sass 中失败，那么也清除那个。然后你知道从哪里开始把东西放回去 这是唯一的方法吗？ 角度 9 可以正常工作 【参考方案1】：我解决了这个问题。我手动更新了我所有的 SCSS 文件路径并再次构建它。以前作为一个例子有这样的路径，它在角度 9 中完全可以正常工作。
角度 9 导入
@import "custom/components";
当我使用 angular 10 时，我将所有 SCCS 路径都更新为这样
@import "./custom/components";
经过上述修改后出现项目构建成功。
【讨论】：
您可能已经更改了您的配置详细信息，例如baseUrl 导致此问题。但我也注意到 "optimization": true 优化了内联等 CSS。以上是关于从 Angular 9 更新到 Angular 10 后，`SCSS` 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
从 Angular 9 升级到 Angular 10 时遇到问题
从版本 9 更新到 10 后的 Angular 警告堆栈。ngtypecheck.ts 和 Add only entry points ... in tsconfig
升级到 9.0 和 angular 7 后修复 angular-redux/store
如何从 Angular 4 更新/升级到 Angular 5+