Rails6 css Vertical Timeline

タイムラインを作りたく下記のリンクからVertical Timelineのファイルをダウンロードし使う予定です。

Vertical Timeline

ダウンロードすると style.csssがtyle.scssがあるのですが、assets/stylesheets下に置くと、

style.cssだと上手くいって、style.scssだと上手くいきません。

ファイルのサイズが

style.cssが73kb
style.scssが6kb

なので

出来ればstyle.cssの方を使いたいのですが、

下記の場合CodyHouseframeworkもダウンロードしないと使えないということでしょうか？

教えて頂けると幸いです。

scss
1@import '../../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
2@import url('https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700'); // custom font
3
4// -------------------------------------------------
5
6// Responsive Vertical Timeline - by CodyHouse.co
7
8// -------------------------------------------------
9
10:root {
11  // colors
12  @include defineColorHSL(--cd-color-1, 206, 21%, 24%); // Navy
13  @include defineColorHSL(--cd-color-2, 205, 38%, 89%); // Blue
14  @include defineColorHSL(--cd-color-3, 207, 10%, 55%); // Grey
15  @include defineColorHSL(--cd-color-4, 111, 51%, 60%); // Green
16  @include defineColorHSL(--cd-color-5, 356, 53%, 49%); // Red
17  @include defineColorHSL(--cd-color-6, 47, 85%, 61%);  // Yellow
18
19  // header
20  --cd-header-height: 200px;
21
22  // font
23  --font-primary: 'Droid Serif', serif;
24  --font-secondary: 'Open Sans', sans-serif;
25}
26
27@supports(--css: variables) {
28  :root {
29    @include breakpoint(md) {
30      --cd-header-height:  300px;
31    }
32  }
33}
34
35.cd-main-header {
36  height: var(--cd-header-height);
37  background: var(--cd-color-1);
38  color: var(--color-white);
39  @include fontSmooth;
40
41  h1 {
42    font-family: var(--font-secondary);
43    color: inherit;
44  }
45}
46
47.cd-timeline {
48  overflow: hidden;
49  padding: var(--space-lg) 0;
50  color: var(--cd-color-3);
51  background-color: lightness(var(--cd-color-2), 1.05);
52  font-family: var(--font-primary);
53
54  h2 {
55    font-family: var(--font-secondary);
56    font-weight: 700;
57  }
58}
59
60.cd-timeline__container {
61  position: relative;
62  padding: var(--space-md) 0;
63
64  &::before { // this is the timeline vertical line
65    content: '';
66    position: absolute;
67    top: 0;
68    left: 18px;
69    height: 100%;
70    width: 4px;
71    background: var(--cd-color-2);
72  }
73
74  @include breakpoint(md) {
75    &::before {
76      left: 50%;
77      transform: translateX(-50%);
78    }
79
80  }
81}
82
83.cd-timeline__block {
84  display: flex;
85  position: relative;
86  z-index: 1; // make sure content is above the timeline vertical line
87  margin-bottom: var(--space-lg);
88
89  &:last-child {
90    margin-bottom: 0;
91  }
92
93  @include breakpoint(md) {
94    &:nth-child(even) {
95      flex-direction: row-reverse; // for even blocks -> lay out content from right to left
96    }
97  }
98}
99
100.cd-timeline__img {
101  display: flex;
102  justify-content: center;
103  align-items: center;
104  flex-shrink: 0;
105  width: 40px;
106  height: 40px;
107  border-radius: 50%;
108  box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(#000, 0.08), 0 3px 0 4px rgba(#000, 0.05);
109
110  img {
111    width: 24px;
112    height: 24px;
113  }
114
115  @include breakpoint(md) {
116    width: 60px;
117    height: 60px;
118    order: 1; // flex order -> place the image after cd-timeline__content
119    margin-left: calc(5% - 30px);
120    will-change: transform;
121
122    .cd-timeline__block:nth-child(even) & {
123      margin-right: calc(5% - 30px);
124    }
125  }
126}
127
128.cd-timeline__img--picture {
129  background-color: var(--cd-color-4);
130}
131
132.cd-timeline__img--movie {
133  background-color: var(--cd-color-5);
134}
135
136.cd-timeline__img--location {
137  background-color: var(--cd-color-6);
138}
139
140.cd-timeline__content {
141  flex-grow: 1; // expand element so that it takes up all the available space inside its parent
142  position: relative;
143  margin-left: var(--space-md);
144  background: var(--color-white);
145  border-radius: var(--radius-md);
146  padding: var(--space-md);
147  box-shadow: 0 3px 0 var(--cd-color-2); 
148
149  &::before { // triangle next to content block
150    content: '';
151    position: absolute;
152    top: 16px;
153    right: 100%;
154    @include triangle(left, 7px, var(--color-white));
155  }
156
157  h2 {
158    color: var(--cd-color-1);
159  }
160
161  @include breakpoint(md) {
162    width: 45%;
163    flex-grow: 0; // prevent element from growing inside its parent
164    will-change: transform;
165    margin: 0;
166    font-size: 0.8em;
167    --line-height-multiplier: 1.2;
168
169    &::before { // triangle
170      top: 24px;
171    }
172
173    .cd-timeline__block:nth-child(odd) &::before { // change triangle direction
174      right: auto;
175      left: 100%;
176      @include triangle(right, 7px, var(--color-white)); 
177    }
178  }
179}
180
181.cd-timeline__date {
182  color: alpha(var(--cd-color-3), 0.7);
183
184  @include breakpoint(md) {
185    position: absolute;
186    width: 100%;
187    left: 120%;
188    top: 20px;
189
190    .cd-timeline__block:nth-child(even) & {
191      left: auto;
192      right: 120%;
193      text-align: right;
194    }
195  }
196}
197
198@include breakpoint(md) { // animations
199  .cd-timeline__img--hidden, .cd-timeline__content--hidden {
200    visibility: hidden;
201  }
202
203  .cd-timeline__img--bounce-in {
204    animation: cd-bounce-1 0.6s;
205  }
206
207  .cd-timeline__content--bounce-in {
208    animation: cd-bounce-2 0.6s;       
209  }
210
211  .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in {
212    animation-name: cd-bounce-2-inverse; 
213  }
214}
215
216
217@keyframes cd-bounce-1 {
218  0% {
219    opacity: 0;
220    transform: scale(0.5);
221  }
222  60% {
223    opacity: 1;
224    transform: scale(1.2);
225  }
226  100% {
227    transform: scale(1);    
228  }
229}
230
231@keyframes cd-bounce-2 {
232  0% {
233    opacity: 0;
234    transform: translateX(-100px);   
235  }
236
237  60% {
238    opacity: 1;
239    transform: translateX(20px);       
240  }
241
242  100% {
243    transform: translateX(0);       
244  }
245}
246
247@keyframes cd-bounce-2-inverse {
248  0% {
249    opacity: 0;
250    transform: translateX(100px);   
251  }
252
253  60% {
254    opacity: 1;
255    transform: translateX(-20px);
256  }
257
258  100% {
259    transform: translateX(0);    
260  }
261}

@import '../../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
@import url('https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700'); // custom font

の箇所や

  @include defineColorHSL(--cd-color-1, 206, 21%, 24%); // Navy
  @include defineColorHSL(--cd-color-2, 205, 38%, 89%); // Blue
  @include defineColorHSL(--cd-color-3, 207, 10%, 55%); // Grey
  @include defineColorHSL(--cd-color-4, 111, 51%, 60%); // Green
  @include defineColorHSL(--cd-color-5, 356, 53%, 49%); // Red
  @include defineColorHSL(--cd-color-6, 47, 85%, 61%);  // Yellow

の箇所などがエラーになります。

Error: File to import not found or unreadable: ../../../../../codyhouse-framework/main/assets/css/style.scss.
on line 1:1 of app/assets/stylesheets/style.scss
@import '../../../../../codyhouse-framework/main/assets/css/style.scss';