Can't override Slick carousel style in Angular 6?

Question

I have a carousel running with Slick and Jquery, there's overriding style for the slicks dots (defined in the component) However when running on localhost I can't see the slicks dots receive the CSS, it just loaded from the default slick css.

I checked the internal stylesheet rendered on the web: the default slick.css & slick-theme.css loaded before the component's css so it's supposed the component should have overridden the style but it's not working ?

Here is what I export in 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"
        ],

In my component 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
        }
    } 
}

My component ts file :

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() {
  }

}

There is an issue with your scss nesting. You need to write it like this https://stackoverflow.com/questions/11084757/sass-scss-nesting-and-multiple-classes. Let me know if it helps otherwise I shall try it out myself. — Abhijeet Chakravorty, Feb 23 '19 at 06:30

score 4 · Accepted Answer · answered Feb 23 '19 at 06:03

Can you change the order of css/scss files angular.json as follow

"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",
        ],

and instead of applying style in component level, put the style inside style.scss, which will apply globally. Hence it will override the plugin style.

Can't override Slick carousel style in Angular 6?

1 Answers1