如何在angular-7中覆盖基于组件的scss中的"style.scss“？

Question

我刚刚用sass启动了一个基于angular-7的web应用程序，当我在"styles.scss“中导入scss时，它在整个应用程序中都能正常工作，但当我试图在组件(profile.component.scss)中添加/覆盖css时，它就不能工作了。

Angular CLI: 7.1.4
Angular: 7.1.4
Node: 11.6.0

以下是应用程序的"angular.json“css结构

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
  "src/styles.scss"
],

下面是为应用程序添加的"styles.scss“结构

@import "assets/scss/custom-mixin";
@import "assets/scss/header";
@import "assets/scss/page";
@import "assets/scss/footer";

@import "assets/scss/login";
@import "assets/scss/profile";
@import "assets/scss/profile-edit";
@import "assets/scss/privacy";
@import "assets/scss/search";
@import "assets/scss/testimonial";
@import "assets/scss/public-profile";
@import "assets/scss/card-builder";

@import "assets/scss/rtl";
@import "assets/scss/responsive";

请检查上述结构，让我知道如果你发现这里面有任何错误/错误，并为我提供工作的两个css的应用程序的具体方法。

Answer 1

您必须添加新的CSS文件，并包含在styles.scss下面，然后您可以覆盖CSS。

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
  "src/styles.scss",
  "src/custom.css"
]

Answer 2

您需要告诉angular编译器在哪里查找您的scss文件。

将此代码添加到“样式”属性上方的angular.json文件中：

                "stylePreprocessorOptions": {
                    "includePaths": [
                        "src/theming"
                    ]
                }

现在创建一个src/ .scss目录，并添加你想要的任何主题文件。

然后，您可以在src/ @import 'mycustomstuff' /mycustomstuff.scss所在的位置进行主题。

希望这能有所帮助！如果您仍然卡住，请向我们提供您的component.ts文件。