I temi e i componenti dei temi stanno diventando sempre più potenti e gli sviluppatori diventano sempre più ambiziosi. Per facilitare il lavoro degli sviluppatori, i temi possono ora suddividere il loro SCSS in più file.
Quando si crea un nuovo tema con la theme CLI, o si condivide un tema su github, è sufficiente creare una nuova cartella chiamata scss. Riempila con i tuoi file .scss, seguendo qualsiasi struttura di cartelle, e tutti i file saranno disponibili per l’importazione nelle sezioni SCSS comuni / desktop / mobile del tuo tema.
Ad esempio, se vuoi avere una variabile comune disponibile sia per lo SCSS mobile che per quello desktop, potresti fare qualcosa di simile:
scss/my-folder/variables.scss
$favourite-color = red;
desktop/desktop.scss
@import "my-folder/variables";
body {
background-color: $favourite-color;
}
mobile/mobile.scss
@import "my-folder/variables";
body {
color: $favourite-color;
}
Questa funzionalità è stata aggiunta in v2.3.0.beta8, quindi non utilizzare queste funzionalità per il momento se devi mantenere la retrocompatibilità con le versioni precedenti di Discourse. Puoi utilizzare il parametro minimum_discourse_version di about.json per assicurarti che il tuo componente non venga utilizzato su una versione precedente.
Questo documento è controllato tramite versione - suggerisci modifiche su github.
Quando convertito in un tema autonomo, il colore di sfondo diventa verde, ma quando viene utilizzato come componente all’interno di un altro tema, non modifica affatto il colore di sfondo.
La configurazione del tema ha una struttura di file predefinita e ho aggiunto scss/test.scss. Poi ho inserito @import "test";.
Nella console (usando discourse_theme watch) ottengo: ✘ Errore in common scss: Errore: File da importare non trovato o non leggibile: test. sulla riga 1 di common.scss
Ho dichiarato solo una variabile (a proposito, c’è un errore di battitura nel primo blocco di codice sopra: è stata dichiarata con il segno uguale: $favourite-color = red;)
Ma l’ho appena risolto. Ho impostato la versione minima in about.json come v2.3.0.beta8 e quando la rimuovo, funziona perfettamente. Non l’avevo mai usato prima, quindi non sono sicuro di cosa non vada nella dichiarazione.
Interessante! Se aggiungi di nuovo la versione minima, si rompe in modo coerente? Se è così, ti dispiacerebbe comprimere il tema rotto e condividerlo qui? (o inviarlo in messaggio privato)
Come detto, non ho mai impostato una versione minima in precedenza. Quindi l’ho semplicemente copiata qui sopra come v2.3.0.beta8. Questo causa un errore, mentre 2.3.0.beta8 funziona perfettamente.