不能在 Angular 6 中覆盖 Slick 轮播样式？答案

【问题标题】：Can't override Slick carousel style in Angular 6?不能在 Angular 6 中覆盖 Slick 轮播样式？
【发布时间】：2019-02-23 05:02:18
【问题描述】：

我有一个使用 Slick 和 Jquery 运行的轮播，光滑点有最重要的样式（在组件中定义）但是，在 localhost 上运行时，我看不到 slicks 点接收 CSS，它只是从默认的 slick 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() {
  }

}

【问题讨论】：

您的 scss 嵌套存在问题。你需要这样写stackoverflow.com/questions/11084757/…。让我知道是否有帮助，否则我将自己尝试。

标签： css angular slick.js

【解决方案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 中，它将全局应用。因此它将覆盖插件样式。

【讨论】：