मैं एल्म विकास के दौरान स्टाइलशीट कैसे बनाए रख सकता हूं?

मैं एल्म के लिए नया हूं और elm-html के साथ एक वेब ऐप बनाने की कोशिश कर रहा हूं। मुझे अपने वर्कफ़्लो को विकसित करने और मेरे परिणामों को तेज़ी से देखने में परेशानी हो रही है।मैं एल्म विकास के दौरान स्टाइलशीट कैसे बनाए रख सकता हूं?

मैंने अपने परिवर्तनों को प्रस्तुत करने और पुनः लोड करने के लिए elm-reactor का उपयोग किया है, लेकिन यह मेरे ऐप को localhost:8000/Foo.elm से परोसता है जिसमें कोई बाहरी स्टाइलशीट शामिल नहीं है। मुझे अपने सभी घटकों के लिए इनलाइन शैलियों का उपयोग करना है, जो अधिकांश HTML दिशानिर्देशों से निराश हैं। मैं बजाय सीएसएस (या एक सीएसएस प्रीप्रोसेसर) का उपयोग करना चाहूंगा।

मैं * .js फ़ाइल बनाने के लिए elm-make का उपयोग कर सकता हूं और इसमें index.html में शामिल हूं जो मैं बनाए रखता हूं, लेकिन इसमें परिवर्तन नहीं दिखाई देंगे।

क्या यह एल्म प्रोजेक्ट में सीएसएस फाइलों को शामिल करने का गलत तरीका है, और यदि नहीं, तो मैं एल्म के बाहर स्टाइलशीट कैसे बनाए रखूं और फिर भी बदलाव के दौरान स्थानीय रूप से अपनी परियोजना की सेवा कैसे करूं?

स्रोत

2016-02-05 Eric

आप शायद उन सीमाओं के कारण अपने मुख्य विकास के लिए एल्म-रिएक्टर का उपयोग करके से बेहतर हो। यह आपकी बाहरी सीएसएस फ़ाइल का उपयोग करने के लिए पूरी तरह से स्वीकार्य है और मैं सहमत हूं, आउटपुट एचटीएमएल में स्टाइल एम्बेड करने से यह एक बेहतर अभ्यास है।

मैंने गलप और gulp-elm पैकेज का उपयोग एक फ़ाइल देखने का कार्य सेट करने के लिए किया है जो सभी एल्म कोड (साथ ही साथ एससीएसएस फाइल) को संकलित करता है, और यह अद्भुत काम करता है।

यदि आप इसमें हैं तो 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

मुझे उन लोगों के लिए एक अच्छा समाधान मिला जो पूर्ण सीएसएस के साथ एल्म रिएक्टर में त्वरित प्रोटोटाइप चाहते हैं लेकिन बिल्ड टूलींग या अधिक परिष्कृत एल्म सीएसएस पैकेजों को समझना नहीं चाहते हैं। आप मूल एल्म, एल्म-एचटीएमएल, और सीएसएस का उपयोग करके बहुत तेजी से शुरू कर सकते हैं।

यह समाधान स्टाइल टैग बनाने के लिए इनलाइन शैलियों और Html.node उत्पन्न करने के लिए मानक एल्म का उपयोग करता है ताकि आप दस्तावेज़ के 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_ इनलाइन शैलियों को करना चाहता हूं। साथ ही, जब स्टाइलशीट जटिल हो जाते हैं, तो एसएएसएस जैसे प्रीप्रोसेसर को रिफैक्टर करना और मुश्किल करना मुश्किल होगा। – 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

मैं एल्म विकास के दौरान स्टाइलशीट कैसे बनाए रख सकता हूं?

उत्तर

संबंधित मुद्दे