我可以在打字稿中创建带有圆滑轮播的按钮，但我无法在 scss 中塑造它们

编程问答 2023-09-04

问题描述

我试图在我的项目中用打字稿创建一个按钮并用 css 对其进行整形，按钮已形成，但 scss 看不到我写的代码。

我不认为 scss 代码是错误的，因为当我为 html 创建一个按钮并给它的类一个光滑的箭头时，形状就形成了。

scss 代码

body {
 font-family: Montserrat,sans-serif;
 margin: 0;
  }


$bg-gradient: linear-gradient(
   151deg,rgba(131,58,180,1) 0%,rgba(253,29,1) 50%,rgba(252,176,69,1) 100%
 );


     //arrows

 .slick-arrow {
   position: absolute;
   bottom: 2em;
   right: 2em;
   z-index: 2;
   background: $bg-gradient;
   background-size: 100%;
   border: 0;
   width: 30px;
   height: 25px;
   text-indent: -9999px;
   clip-path: polygon(50% 0%,0% 100%,100% 100%);
   cursor: pointer;
   transition: all 0.5s ease;

   &:hover {
     background-size: 190%;
   }

   &.slick-prev {
     right: 5em;
     transform: rotate(-90deg);
   }

   &.slick-next {
     transform: rotate(90deg);
   }
 }

打字稿代码

  import { Component,OnInit } from '@angular/core';

 declare var $: any;

 @Component({
   selector: 'app-home-page',templateUrl: './home-page.component.html',styleUrls: ['./home-page.component.scss'],})
 export class HomePageComponent implements OnInit {
   constructor() {}

   ngOnInit(): void {
     this.demo();
   }

   demo() {
     $('.slider').slick({
       slidesToShow: 1,slidesToScroll: 1,arrows: true,fade: true,});
   }
 }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularslick.jstypescripttypescripttypescript