在我的开发中，一切正常，但是当我为生产构建项目时ng build --prod app1-admin-app角度 CLI 不会从我的组件中获取我的.scss文件，只会从主 style.scss 中获取。
当我构建我的核心应用程序时，一切都像预期的那样工作......当我构建任何项目时，我会遇到这个问题......
首先，我从头开始构建具有.css风格的应用程序，但现在我转换为.sass
我做了所有解释，从这里将所有内容更改为.scss
这是我的角度.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app1-application-core": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/app1-application-core",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/hammerjs/hammer.min.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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app1-application-core:build"
},
"configurations": {
"production": {
"browserTarget": "app1-application-core:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app1-application-core:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app1-application-core:serve"
},
"configurations": {
"production": {
"devServerTarget": "app1-application-core:serve:production"
}
}
}
}
},
"app1-admin-app": {
"projectType": "application",
"schematics": {},
"root": "projects/app1-admin-app",
"sourceRoot": "projects/app1-admin-app/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/app1-admin-app",
"index": "projects/app1-admin-app/src/index.html",
"main": "projects/app1-admin-app/src/main.ts",
"polyfills": "projects/app1-admin-app/src/polyfills.ts",
"tsConfig": "projects/app1-admin-app/tsconfig.app.json",
"aot": false,
"assets": [
"projects/app1-admin-app/src/favicon.ico",
"projects/app1-admin-app/src/assets",
"projects/app1-admin-app/src/manifest.webmanifest"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"projects/app1-admin-app/src/styles.scss"
],
"scripts": ["node_modules/hammerjs/hammer.min.js"]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/app1-admin-app/src/environments/environment.ts",
"with": "projects/app1-admin-app/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"serviceWorker": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app1-admin-app:build"
},
"configurations": {
"production": {
"browserTarget": "app1-admin-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app1-admin-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/app1-admin-app/src/test.ts",
"polyfills": "projects/app1-admin-app/src/polyfills.ts",
"tsConfig": "projects/app1-admin-app/tsconfig.spec.json",
"karmaConfig": "projects/app1-admin-app/karma.conf.js",
"assets": [
"projects/app1-admin-app/src/favicon.ico",
"projects/app1-admin-app/src/assets",
"projects/app1-admin-app/src/manifest.webmanifest"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"projects/app1-admin-app/src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/app1-admin-app/tsconfig.app.json",
"projects/app1-admin-app/tsconfig.spec.json",
"projects/app1-admin-app/e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "projects/app1-admin-app/e2e/protractor.conf.js",
"devServerTarget": "app1-admin-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app1-admin-app:serve:production"
}
}
}
}
},
"defaultProject": "app1-application-core",
"cli": {
"defaultCollection": "@ngrx/schematics"
},
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
}
你的 css 文件应该有.scss扩展名，你应该像这样将它们包含在你的组件中：
@Component({
selector: 'workspace',
templateUrl: './workspace.component.html',
styleUrls: ['./workspace.component.scss']
})
您需要更新原理图部分
"projects": {
"app1-application-core": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
并删除 angular.json 末尾的原理图部分，angular.json 中应该有 1 个原理图部分
确保在修改 angular.json 后再次运行 ng serve