Не можете отменить стиль Slick Carousel в Angular 6? - PullRequest
Новая
       10

Не можете отменить стиль Slick Carousel в Angular 6?

0 голосов
/ 23 февраля 2019

У меня есть карусель, работающая с 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() {
  }

}

1 Ответ

0 голосов
/ 23 февраля 2019

Можете ли вы изменить порядок файлов 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, который будет применяться глобально.Следовательно, он переопределит стиль плагина.

...