Как я могу поддерживать таблицы стилей во время разработки Elm?

Я новичок в Elm и пытаюсь создать веб-приложение с elm-html. У меня возникли проблемы с настройкой моего рабочего процесса, чтобы быстро разработать и увидеть мои результаты.Как я могу поддерживать таблицы стилей во время разработки Elm?

Я использовал elm-reactor для обслуживания и перезагрузки моих изменений, но который служит моему приложению от localhost:8000/Foo.elm, который не содержит никаких внешних таблиц стилей. Я должен использовать встроенные стили для всех моих компонентов, что не рекомендуется большинству рекомендаций HTML. Я бы предпочел использовать CSS (или препроцессор CSS).

Я могу использовать elm-make для создания файла * .js и включить его в index.html, который я поддерживаю, но он не будет следить за изменениями.

Неправильный подход к включению файлов CSS в проект Elm, а если нет, то как я могу поддерживать таблицы стилей вне Elm и по-прежнему выполнять мой проект локально, наблюдая за изменениями?

источник

2016-02-05 Eric

Возможно, вам больше не нужно не с использованием elm-реактора для вашего основного развития из-за этих ограничений. Допустимо использовать собственный внешний файл CSS, и я согласен, что это гораздо лучше, чем встраивание стиля в выходной HTML-код.

Я использовал gulp и пакет gulp-elm, чтобы настроить задачу просмотра файлов, которая скомпилирует весь код Elm (а также файлы SCSS) при сохранении, и это прекрасно работает.

Существует Grunt plug-in for Elm, если вы в этом.

Существует webpack loader for Elm, если вы предпочитаете, что за глоток или ворчать.

Существует молодой проект, который предлагает Single Page Application generator for Yeoman, который объединяет некоторые задачи по перепрограммированию. Он очень убежден в некоторых решениях, которые он принимает, но это хорошая рекомендация, если вы хотите быстро работать.

источник

2016-02-05 19:04:29

Существует также elm-server (https://github.com/maxgurewitz/elm-server) для людей, которые предпочли бы не использовать загрузчик задач или загрузчик сценариев – lukewestby

Я нашел хорошее решение для тех, кто хочет быстрого прототипирования в elm-реакторе с полным CSS, но не хочет определять компоновку сборки или более сложные пакеты CSS elm. Вы можете начать довольно быстро, используя основные вяза, elm-html и css.

Это решение использует стандартный Elm для создания встроенных стилей и Html.node, чтобы создать тег стиля, чтобы вы могли применить правило CSS к body документа.

-- 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") 
    ] 

...

источник

2016-11-24 03:50:17

Это хорошее быстрое решение, но я упомянул в своем вопрос, который я хотел бы использовать _avoid_ встроенные стили. Кроме того, когда стили становятся сложными, будет сложно реорганизовать и добавить препроцессор, такой как SASS. – Eric

https://github.com/elm-community/elm-webpack-starter была моя первая попытка закончить за вяз-реакторных + встроенных стилей. Это казалось тяжелым.

Я в настоящее время используют вяз жизни (https://github.com/tomekwi/elm-live), например так:

$ 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

код в Main.elm и стили в style.css.

источник

2017-06-16 22:24:59

Пожалуйста, прочтите и следуйте https://stackoverflow.com/help/promotion – m02ph3u5

Как я могу поддерживать таблицы стилей во время разработки Elm?

ответ

Смежные вопросы