Question

我有一个运行Slick和Jquery的轮播，浮点的主要样式（在组件中定义）但是，在本地主机上运行时，我看不到圆点收到CSS，而只是从默认的圆滑CSS加载了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() {
  }

}

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轮播样式？

1 个答案: