Question

尝试将全局CSS文件加载到Angular项目时遇到了一些问题。这是我的angular.json：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "project": {
            "root": "",
            "sourceRoot": "src/main/webapp",
            "projectType": "application",
            "architect": {
                "build": {
                    "index": "src/main/webapp/index.html",
                    "options": {
                        "styles": [
                            "../assets/coy/css/styles.css",
                            "../../../node_modules/font-awesome/scss/font-awesome.scss",
                            "../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "ecom",
    "cli": {
        "packageManager": "yarn"
    },
    "schematics": {
        "@schematics/angular:component": {
            "inlineStyle": true,
            "inlineTemplate": false,
            "spec": false,
            "prefix": "ic",
            "styleExt": "scss"
        },
        "@schematics/angular:directive": {
            "spec": false,
            "prefix": "ic"
        },
        "@schematics/angular:guard": {
            "spec": false
        },
        "@schematics/angular:pipe": {
            "spec": false
        },
        "@schematics/angular:service": {
            "spec": false
        }
    }
}

我的CSS文件位于src/main/webapp/assets/coy/css/styles.css。但是，当我启动页面时，由于组件的样式不正确，因此CSS未被读取。有什么想法吗？

谢谢！

Answer 1

以这种方式放置样式文件

   "styles": [
                "./src/assets/coy/css/styles.css",
                "./node_modules/font-awesome/scss/font-awesome.scss",
                "./node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/styles.css"
              ]

还要检查全局css文件引用是否如我上面的代码所示。

自定义CSS文件无法在Angular 6项目中正确加载

1 个答案: