https://gyk.ro/tags/node/Recent content in Node on Gyula's blogHugoen-us&copy; 2017-2024. All rights reserved.Sat, 11 Jun 2022 10:19:05 +0300https://gyk.ro/2022/06/global-scss-in-sveltekit/Sat, 11 Jun 2022 10:19:05 +0300https://gyk.ro/2022/06/global-scss-in-sveltekit/<h2 id="tldr">TL;DR</h2> <p>Run: <code>npm i -D nodemon concurrently</code></p> <p>Add the following npm scripts</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span><span style="color:#e6db74">&#34;dev:full&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;concurrently --kill-others \&#34;npm run scss:dev\&#34; \&#34;npm run dev:nodemon\&#34;&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;dev:nodemon&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;nodemon --exec \&#34;npm run dev\&#34;&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;scss&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;sass src/scss/:static/style/&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;scss:dev&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;sass -w src/scss/:static/style/&#34;</span> </span></span></code></pre></div><p>Add <code>npm run scss &amp;&amp;</code> before the <code>build</code>, <code>package</code>, <code>preview</code> and <code>prepare</code> scripts</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span><span style="color:#e6db74">&#34;build&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;npm run scss &amp;&amp; svelte-kit build&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;package&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;npm run scss &amp;&amp; svelte-kit package&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;preview&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;npm run scss &amp;&amp; svelte-kit preview&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span><span style="display:flex;"><span><span style="color:#e6db74">&#34;prepare&#34;</span><span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;npm run scss &amp;&amp; svelte-kit sync&#34;</span><span style="color:#960050;background-color:#1e0010">,</span> </span></span></code></pre></div><h2 id="the-setup">The setup</h2> <p>So I started a little project <em>(hopefully I will write about it soon)</em> and I tought I would write the frontend in svelte</p>