Css Can'；t覆盖棱角6中的光滑旋转木马样式？

我有一个旋转木马运行着Slick和Jquery， 光滑点（在组件中定义）具有覆盖样式 然而，当在localhost上运行时，我看不到slick dots接收到CSS，它只是从默认的slick CSS加载的

我检查了web上呈现的内部样式表：默认的slick.css&slick-theme.css在组件的css之前加载，所以它认为组件应该覆盖样式，但它不工作

以下是我在Angular.json中导出的内容

 "styles": [
          "src/styles.scss",
          "node_modules/bulma/css/bulma.min.css",
          "node_modules/slick-carousel/slick/slick-theme.css",
          "node_modules/slick-carousel/slick/slick.css"
        ],
 "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/slick-carousel/slick/slick.min.js"
        ],

在我的组件SCSS中：

@import "../../shared_scss/mixin.scss";
@import "../../shared_scss/variables.scss";

/* Slider */
.carousel{
    background-size: cover;
    height: auto;
    margin-top: 50px;
    margin-bottom: 0 !important;
    .carousel_item{
       &:hover{
        cursor: pointer;
       }
    }
    .slick-dots{
        bottom: 40px;
        li button:before{
            font-size: 20px;
        }
        li.slick-active button:before {
            opacity: .75;
            color: $neon-green;
        }

    }
}
// responsive homepage carousel
@include breakpoint(xs){
    .carousel{
        margin-top: 40px;
        .slick-dots{
            bottom: 5px
        }
    } 
}

我的组件ts文件：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';
import 'slick-carousel';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit, AfterViewInit {
  ngAfterViewInit(): void {

    // Slick carousel
    $('.carousel').slick({
      slidesToShow: 1,
      adaptiveHeight: true,
      arrows: false,
      dots: true,
      infinite: true,
      speed: 300
    });
  }
  constructor() { }

  ngOnInit() {
  }

}

---

您可以按如下方式更改css/scss文件angular.json的顺序吗

"styles": [
          "node_modules/bulma/css/bulma.min.css",
          "node_modules/slick-carousel/slick/slick-theme.css",
          "node_modules/slick-carousel/slick/slick.css",
          "src/styles.scss",
        ],

---

而不是在组件级别应用样式，而是将样式放在将全局应用的

style.scss

中。因此，它将覆盖插件样式。

能否按如下方式更改css/scss文件angular.json的顺序

"styles": [
          "node_modules/bulma/css/bulma.min.css",
          "node_modules/slick-carousel/slick/slick-theme.css",
          "node_modules/slick-carousel/slick/slick.css",
          "src/styles.scss",
        ],

---

而不是在组件级别应用样式，而是将样式放在将全局应用的

style.scss

中。因此，它将覆盖插件样式。

您的SCS嵌套存在问题。你需要这样写。让我知道，如果它有帮助，否则我将尝试它自己。有一个问题与您的scss嵌套。你需要这样写。如果有帮助，请告诉我，否则我将亲自尝试。