从 Angular 9 更新到 Angular 10 后，`SCSS` 不起作用
`SCSS` doesn't work after Updating from Angular 9 to Angular 10
我将我的 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";
我在 Whosebug 和 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测试”，
“林特”：“吴林特”，
“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-动态": "10.1.1",
"@angular/router": "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",
"angular-文件上传器": "^7.0.1",
"bootstrap": "^4.5.2",
"chart.js": "2.7.3",
“剪贴板”：“2.0.4”，
“核心js”：“3.6.4”，
“firebase”：“^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-装载机": "^10.0.2",
"sweetalert2": "^10.0.2",
“tslib”：“2.0.1”，
“zone.js”：“0.11.1”
},
“devDependencies”：{
"@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”，
"jasmine-spec-reporter": "^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",
"node-sass": "^4.14.1",
“量角器”：“7.0.0”，
“ts-节点”：“9.0.0”，
“tslint”：“6.1.3”，
“打字稿”：“4.0.2”
}
}
我解决了这个问题。我手动更新了我所有的 SCSS 文件路径并重新构建它。以前作为一个例子，有这样的路径在 angular 9.
中完全可以正常工作
angular 9 导入
@import "custom/components";
当我使用 angular 10 时，我将所有 SCCS 路径更新为这样
@import "./custom/components";
above-mentioned 更改后出现项目构建成功。
我将我的 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";
我在 Whosebug 和 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测试”， “林特”：“吴林特”， “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-动态": "10.1.1", "@angular/router": "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", "angular-文件上传器": "^7.0.1", "bootstrap": "^4.5.2", "chart.js": "2.7.3", “剪贴板”：“2.0.4”， “核心js”：“3.6.4”， “firebase”：“^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-装载机": "^10.0.2", "sweetalert2": "^10.0.2", “tslib”：“2.0.1”， “zone.js”：“0.11.1” }, “devDependencies”：{ "@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”， "jasmine-spec-reporter": "^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", "node-sass": "^4.14.1", “量角器”：“7.0.0”， “ts-节点”：“9.0.0”， “tslint”：“6.1.3”， “打字稿”：“4.0.2” } }
我解决了这个问题。我手动更新了我所有的 SCSS 文件路径并重新构建它。以前作为一个例子，有这样的路径在 angular 9.
中完全可以正常工作angular 9 导入
@import "custom/components";
当我使用 angular 10 时，我将所有 SCCS 路径更新为这样
@import "./custom/components";
above-mentioned 更改后出现项目构建成功。