title: svelte CSS file isn't generate on run
body: <p>I'm following this <a href="https://youtu.be/vhGiGqZ78Rs" rel="nofollow noreferrer">tutorial</a> trying to create a svelte frontend.</p>
  
  <p>I don't get any errors but when I run <code>npm run dev</code> i get:</p>
  
  <p><a href="https://i.stack.imgur.com/fOT36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fOT36.png" alt="run output"></a></p>
  
  <p>which I'm supposed to see the new extra.css file created in the public folder. and so the page displayed is without any CSS and just plain li items instead of having materialize-css attributes.</p>
  
  <p>my files:</p>
  
  <p><code>rollup.config.js</code></p>
  
  <pre><code>import svelte from 'rollup-plugin-svelte';
  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  import livereload from 'rollup-plugin-livereload';
  import { terser } from 'rollup-plugin-terser';
  import css from 'rollup-plugin-css-only';
  
  const production = !process.env.ROLLUP_WATCH;
  
  export default {
      input: 'src/main.js',
      output: {
          sourcemap: true,
          format: 'iife',
          name: 'app',
          file: 'public/build/bundle.js'
      },
      plugins: [
          svelte({
              // enable run-time checks when not in production
              dev: !production,
              // we'll extract any component CSS out into
              // a separate file - better for performance
              css: css =&gt; {
                  css.write('public/build/bundle.css');
              }
          }),
          css({ output: 'public\extra.css'}),
  ...
  ...
  </code></pre>
  
  <p><code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8'&gt;
      &lt;meta name='viewport' content='width=device-width,initial-scale=1'&gt;
  
      &lt;title&gt;Svelte app&lt;/title&gt;
  
      &lt;link rel='icon' type='image/png' href='/favicon.png'&gt;
      &lt;link rel='stylesheet' href='extra.css'&gt;
      &lt;link rel='stylesheet' href='global.css'&gt;
      &lt;link rel='stylesheet' href='build/bundle.css'&gt;
  
      &lt;script defer src='/build/bundle.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>App.svelte</code></p>
  
  <pre><code>&lt;script&gt;
      import '..\node_modules\materialize-css\dist\css\materialize.min.css';
      import '..\node_modules\materialize-css\dist\js\materialize.min.js';
  
      import { Router, Route } from 'svelte-routing';
  
      import Navbar from './layout/Navbar.svelte';
      import Home from './pages/Home.svelte';
      import About from './pages/About.svelte';
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  
  &lt;Router&gt;
      &lt;Navbar&gt;
          &lt;div class="container"&gt;
              &lt;Route path="/" component={Home} /&gt;
              &lt;Route path="/about" component={About} /&gt;
          &lt;/div&gt;
      &lt;/Navbar&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p><code>Navbar.svelte</code></p>
  
  <pre><code>&lt;script&gt;
      import { Link } from 'svelte-routing';
  &lt;/script&gt;
  
  &lt;nav&gt;
      &lt;div class="nav-wrapper"&gt;
          &lt;Link to="/" class="brand-logo"&gt;svelte app&lt;/Link&gt;
        &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
          &lt;li&gt;
            &lt;Link to="/"&gt;Home&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to="/about"&gt;About&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and i also found this <a href="https://stackoverflow.com/a/56607947/1716131">question/answer</a> on SO that seem to say that the tutorial is ok and working for people so i'm confused.</p>