即使我的订单在 angular.json 文件中正确，PrimeNG 的样式也不会被应用。 “styles.scss”正在覆盖它

Question

我在我的 Angular 应用程序中使用 Prime NG，并且我也有一些自己的风格。我已将样式的优先级顺序集成到

angular.json

文件中的

styles

数组中。虽然我使用了正确的顺序，但首先应用的是我的自定义样式，而不是 prime ng 的样式。

我有一个

_reset-and-normalize.scss

文件，其中给出

margin

、

padding

和

border

作为

0

。此样式导入到我的

styles.scss

文件中。因此，我不知道为什么，但我的 prime ng 的样式被

_reset-and-normalize.scss

中提到的属性覆盖，即使

angular.json

中的顺序完全正确。

角度.json

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ff-cms",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.svg",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/summernote/dist/summernote-lite.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/summernote/dist/summernote-lite.min.js"
            ]
          },
          "configurations": {
            "production": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "preprod": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.preprod.ts"
                }
              ]
            },
            "stage": {
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": false,
              "namedChunks": false,
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },

样式.scss

/* You can add global styles to this file, and also import other style files */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Helper CSS */
@import 'assets/css/_common.scss';
@import 'assets/css/_typography.scss';
@import 'assets/css/_grid.scss';
@import 'assets/css/_pattern.scss';
@import 'assets/css/_variables.scss';
@import 'assets/css/_reset-and-normalize.scss';

Answer 1

尝试直接在全局样式文件中添加导入，同时安装 primeflex （来自 PrimeNg 的 CSS 库）：

样式.scss：

$gutter: 1rem;

@import "primeng/resources/primeng.min.css";
@import "primeflex/primeflex.scss";

/*
 Your global styles
*/

然后从 angular.json 的样式数组中删除导入。