title: How to change default location of svelte css in rollup.config.js?
body: <p>I'm using svelte compoenents in some pages of myapp. the directory tree is like:</p>
  <pre><code>-myapp
  --controller
  --static
  --svelte
  </code></pre>
  <p>I have manged to setup svelte to ouput js bundle to <code>myapp/static/js/</code> by modifying <code>rollup.config.js</code>:</p>
  <pre><code>export default {
      input: 'src/main.js',
      output: {
          sourcemap: true,
          format: 'iife',
          name: 'app',
          file: '../static/js/bundle.js'
  </code></pre>
  <p>However the styles in components is also saved in <code>myapp/static/js</code> which is not very idomatic. So I want to change the location to <code>myapp/static/css</code></p>
  <p>Currently css is defined as:</p>
  <pre><code>plugins: [
      svelte({
          compilerOptions: {
              // enable run-time checks when not in production
              dev: !production
          }
      }),
      css({ output: 'bundle.css' }),
  </code></pre>
  <p>I tried things like:</p>
  <pre><code>css({  
      output: {
          file: '../static/css/bundle.css'
      },          
   }),
  </code></pre>
  <p>But I get this error:</p>
  <pre><code>bundles src/main.js → ../static/js/bundle.js...
  [!] (plugin css) Error: The &quot;fileName&quot; or &quot;name&quot; properties of emitted files must be strings that are neither absolute nor relative paths, received &quot;../static/js/bundle.css&quot;.
  </code></pre>
  <p>So I'm wondering what is the correct way to do that?</p>