LESS nach CSS konvertieren und mit Jekyll verwenden

Question

In einem früheren Beitrag (How do I reset all css styles for a certain div? (Jekyll blog)) habe ich nach einer Zeitleiste gefragt, die ihren Stil verliert, wenn ich sie mit meiner Jekyll-Site verwende.

Ich habe versucht, uns einen iframe, aber das ist keine gute Lösung für mobile.

Meine Zeitleiste basiert auf diesem Projekt: https://github.com/ybogdanov/history-timeline. Diese Zeitleiste verwendet LESS zum Bereitstellen von Stilen.

Das Problem ist, dass Jekyll SASS anstelle von CSS verwendet.

Das ist mein modifizierte weniger Stil, der mit einem Iframe perfekt funktioniert:

#content { 
    flex: 1; 
    overflow: scroll; 
    position: relative; 
} 

#ruler { 
    top: 0px; 
    height: 30px; 
    padding-top: 5px; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
    transition: top 0.1s linear; 
} 

#chart { 
    margin-top: 35px; 
} 

svg { 
    .axis path, 
    .axis line { 
     fill: none; 
     stroke: black; 
     shape-rendering: crispEdges; 
    } 

    .axis text { 
     font-family: sans-serif; 
     font-size: 18px; 
    } 
} 

verwendete ich ein weniger CSS-Konverter und ich bekomme diese:

#content { 
    flex: 1; 
    overflow: scroll; 
    position: relative; 
} 
#ruler { 
    top: 0px; 
    height: 30px; 
    padding-top: 5px; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
    transition: top 0.1s linear; 
} 
#chart { 
    margin-top: 35px; 
} 
svg .axis path, 
svg .axis line { 
    fill: none; 
    stroke: black; 
    shape-rendering: crispEdges; 
} 
svg .axis text { 
    font-family: sans-serif; 
    font-size: 18px; 
} 

Aber einige Zeilen geben Sie mir eine Warnung über "unbekannte Eigenschaft" und die Stile fehlen, wenn ich die Timeline mit einem div einfügen.

Was kann ich tun? Ich frage mich nur, ob ich einen lesbaren Text habe.

Timeline mit iframe:

Timeline mit div:

Answer 1

Die original file nur verbrauchen weniger für einige Vertiefung und sollte mit Sass arbeiten, nur die Datei umbenennen und setzen es im Ordner _sass, so dass Jekyll es bauen kann.

mv styles.less timeline.scss && mv timeline.scss _sass 

erstellen css/main.scss Datei mit:

--- 
--- 

@import "timeline"; 

In Ihrem Layout oder Ihre Include-Datei, sollten Sie die generierte main.css Datei auf den Link:

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">