无法覆盖 Angular 6 中的 Slick 旋转木马样式？

Question

我有一个旋转木马运行 Slick 和 Jquery, 光滑点有覆盖样式（在组件中定义）但是，当运行在本地主机上时，我看不到光滑点收到 CSS，它只是从默认光滑 css.

加载

我检查了在网络上呈现的内部样式表：默认的 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() {
  }

}

Answer 1

你能改变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 中，这将在全局应用。因此它将覆盖插件样式。

无法覆盖 Angular 6 中的 Slick 旋转木马样式？

Can't override Slick carousel style in Angular 6?

css

slick.js

angular