Как переопределить "style.scss" из компонентного scss в angular-7?

Question

Я только что запустил веб-приложение на основе angular-7 с sass, когда я импортирую scss в "styles.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

Вам нужно указать угловому компилятору, где искать ваши scss-файлы.

Добавьте это в свой файл angular.json над свойством styles:

                "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"
]