我有一个与Slick和Jquery一起运行的旋转木马,有光滑点(在组件中定义)的重写样式但是当在localhost上运行时我看不到光滑点接收CSS,它只是从默认的光滑css加载。
我检查了在web上呈现的内部样式表:在组件的css之前加载了默认的slick.css和slick-theme.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() {
}
}
你可以改变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
中,这将全局应用。因此它将覆盖插件样式。