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

Question

我刚刚使用 sass 启动了一个基于 angular-7 的 Web 应用程序，当我在“styles.scss”中导入 scss 时，它可以在整个应用程序中完美运行，但是当我尝试在组件中添加/覆盖 css 时（profile.component .scss) 那么它就不起作用了。

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

你需要告诉 Angular 编译器在哪里寻找你的 scss 文件。

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

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

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

然后你可以@import 'mycustomstuff' src/theming/mycustomstuff.scss 存在。

希望这会有所帮助！如果您仍然遇到问题，请向我们提供您的 component.ts 文件。

Answer 2

您必须添加新的 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"
]