WordPressでライブラリのslickを実装したのですが、dotsにcssが効きません

前提・実現したいこと

ポートフォリオを作成中なのですが、その中でスライダーを使いたいなと思い、slickを使ったのですが読み込んで使ったのですが、dotsだけcssが効きません。dotsのcontentをアレンジしたいなと思っています。

発生している問題・エラーメッセージ

slickのtheme.cssの書き替えなどを試したのですが、変な英文字列が出てきました。

エラーメッセージ

該当のソースコード

html
1<div class="works">
2    <?php if(have_posts()): ?>
3    <ul class="slider">
4		<?php while(have_posts()):the_post(); ?>
5      <li <?php post_class('work'); ?>  ><a href="<?php the_permalink(); ?>" ><p class="work-title"><?php the_title(); ?></p><?php the_post_thumbnail(); ?></a></li>
6		<?php endwhile;  ?>
7    </ul>
8	  <?php endif;  ?>
9  </div>
10

css
1.works {
2  padding: 40px 0;
3
4  .slider {
5    margin: 50px auto;
6    width: 80%;
7    border: 1px solid #bbbbbb;
8    box-shadow: 0 0 8px #bbbbbb inset;
9
10    .work {
11      margin: 40px;
12      overflow: hidden;
13      height: 250px;
14      position: relative;
15      box-shadow: 0 0 10px #ababab;
16      transition: all 0.6s;
17
18      &:hover {
19        transform: scale(1.1, 1.1);
20
21        .work-title {
22          transform: rotate(8deg) translate(-50%, -50%) scale(1.1);
23        }
24      }
25
26      img {
27        width: 100%;
28      }
29
30      .work-title {
31        position: absolute;
32        color: white;
33        top: 50%;
34        left: 50%;
35        transform: translate(-50%, -50%);
36        font-size: 2em;
37        white-space: nowrap;
38        text-shadow: 0 0 3px #444444;
39        transition: all 0.6s;
40        backdrop-filter: blur(2px);
41      }
42
43    }
44
45
46  }
47
48
49  .slick-next,
50  .slick-prev {
51    width: 20px;
52    height: 20px;
53    border-top: 2px solid black;
54    border-right: 2px solid black;
55    -webkit-transform: rotate(45deg);
56    transform: rotate(45deg);
57    transition: 1s;
58
59    &:hover {
60      transform: translate(10px, 0) rotate(45deg) scale(1.2, 1.2);
61    }
62  }
63
64  .slick-prev {
65    border-top: none;
66    border-right: none;
67    border-bottom: 2px solid black;
68    border-left: 2px solid black;
69
70    &:hover {
71      transform: translate(-10px, 0) rotate(45deg) scale(1.2, 1.2);
72    }
73  }
74
75  .slick-prev::before,
76  .slick-next::before {
77    content: '';
78
79  }
80}
81
82.slick-dots {
83  bottom: -60px;
84}
85
86button {
87  margin: 0;
88  padding: 0;
89  background: none;
90  border: none;
91  border-radius: 0;
92  outline: none;
93  -webkit-appearance: none;
94  -moz-appearance: none;
95  appearance: none;
96}
97
98.slide-dots {
99  text-align: center;
100
101  li {
102    display: inline-block;
103    margin: 0 15px;
104
105    button {
106      position: relative;
107      text-indent: -9999px;
108
109      &:before {
110        content: '☆';
111        font-size: 20px;
112        text-indent: 0px;
113        position: absolute;
114        top: 0;
115        left: 0;
116      }
117    }
118
119    &.slick-active {
120      button:before {
121        content: '★';
122      }
123    }
124  }
125}
126

試したこと

上記のことと、style.cssからの上書き、wordpressのプラグインからの上書き、オプションのdotsclassでクラスを与えてそれにcssを適用を試しました。練習用に作ったファイルでは書き替えられました。それをコピペしてみたのですが、それも失敗しました。slick-prevなどにはcssが効きました。