Come posso mantenere i fogli di stile durante lo sviluppo di Elm?

Sono nuovo di Elm e sto provando a creare un'app Web con elm-html. Ho difficoltà a impostare il mio flusso di lavoro per sviluppare e vedere rapidamente i miei risultati.Come posso mantenere i fogli di stile durante lo sviluppo di Elm?

Ho usato elm-reactor per servire e ricaricare le mie modifiche ma che serve la mia app da localhost:8000/Foo.elm che non include fogli di stile esterni. Devo usare gli stili in linea per tutti i miei componenti, il che è scoraggiato dalla maggior parte delle linee guida HTML. Preferirei usare CSS (o un preprocessore CSS).

Posso usare elm-make per creare un file * .js e includerlo in un index.html che mantengo, ma non guarderà le modifiche.

È l'approccio sbagliato per includere i file CSS in un progetto Elm, e in caso contrario, come faccio a mantenere i fogli di stile al di fuori di Elm e ancora a servire il mio progetto localmente, mentre osservo le modifiche?

fonte

2016-02-05 Eric

Probabilmente stai meglio su non su usando elm-reactor per il tuo sviluppo principale a causa di queste limitazioni. È perfettamente accettabile utilizzare il proprio file CSS esterno e sono d'accordo, è una pratica molto migliore di incorporare lo stile nell'output HTML.

Ho usato gulp e il pacchetto gulp-elm per impostare un'attività di visualizzazione dei file che compila tutto il codice Elm (oltre ai file SCSS) al salvataggio e che funziona meravigliosamente.

C'è un Grunt plug-in for Elm se ci sei.

C'è un webpack loader for Elm se lo si preferisce in gola o in grugnito.

C'è un progetto giovane che offre uno Single Page Application generator for Yeoman che raggruppa alcune delle attività di caricamento in diretta. È molto supponente su alcune delle decisioni che prende, ma è un buon riferimento se si vuole correre velocemente.

fonte

2016-02-05 19:04:29

C'è anche elm-server (https://github.com/maxgurewitz/elm-server) per le persone che preferiscono non utilizzare un task runner o lo script loader – lukewestby

Ho trovato una buona soluzione per coloro che vogliono la prototipazione rapida in reattore elm con CSS completo, ma non vogliono capire strumenti di costruzione o pacchetti CSS elm sofisticati. Puoi iniziare abbastanza velocemente usando l'elm di base, elm-html e css.

Questa soluzione utilizza Elm standard per generare stili in linea e Html.node per creare un tag di stile in modo da poter applicare una regola CSS allo body del documento.

-- VIEWS 

view model = 
    main_ 
    [ cssMain ] 
    [ 
     styleTag 
    , div 
     [ cssControlPanel ] 
     [ 
      button 
      [ cssBtn 
      , cssBtnGenerate 
      , onClick GenerateMap 
      ] 
      [ text "GENERATE MAP" ] 
     ] 

-- STYLES 

styleTag : Html Msg 
styleTag = 
    let 
    styles = 
     """ 
     body { overflow: hidden; } 
     """ 
    in 
    node "style" [] [ text styles ] 

cssMain : Attribute Msg 
cssMain = 
    style 
    [ ("backgroundColor", "#eee") 
    , ("position", "relative") 
    , ("width", "100vw") 
    , ("height", "100vh") 
    ] 

...

fonte

2016-11-24 03:50:17

Questa è una buona soluzione rapida, ma ho menzionato nella mia domanda che mi piacerebbe _avoid_ stili in linea. Inoltre, quando i fogli di stile si complicano, sarà difficile refactoring e aggiungere un preprocessore come SASS. – Eric

https://github.com/elm-community/elm-webpack-starter è stato il mio primo tentativo di laurearsi al di là di stili di olmo-reattore + linea. Sembrava un po 'pesante.

Attualmente uso olmo-live (https://github.com/tomekwi/elm-live), in questo modo:

$ cat <<——— > index.html 
    <!doctype html> 
    <link rel="stylesheet" href="style.css" /> 

    <body> 
    <div></div> 
    <script src="elm.js"></script> 
    <script>Elm.Main.embed(document.querySelector("div"));</script> 
    </body> 
——— 
$ elm-live Main.elm --output=elm.js --open

Codice è in Main.elm e gli stili sono in style.css.

fonte

2017-06-16 22:24:59

Leggere e seguire https://stackoverflow.com/help/promotion – m02ph3u5

Come posso mantenere i fogli di stile durante lo sviluppo di Elm?

risposta

Problemi correlati