Question

我刚刚用sass启动了一个基于angular-7的Web应用程序，当我在“ styles.scss”中导入scss时，它在整个应用程序中都可以正常工作，但是当我尝试在component（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

您必须添加新的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文件。

将其添加到“ styles”属性上方的angular.json文件中：

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

现在创建目录src / themeing并添加所需的任何.scss文件。

然后您可以@import 'mycustomstuff'在src / theming / mycustomstuff.scss存在的地方。

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

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

2 个答案: