svelte CSS file isn't generate on run

Question

I'm following this tutorial trying to create a svelte frontend.

I don't get any errors but when I run npm run dev i get:

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.

my files:

rollup.config.js

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 => {
                css.write('public/build/bundle.css');
            }
        }),
        css({ output: 'public\extra.css'}),
...
...

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='extra.css'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

App.svelte

<script>
    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';
</script>

<style>
</style>

<Router>
    <Navbar>
        <div class="container">
            <Route path="/" component={Home} />
            <Route path="/about" component={About} />
        </div>
    </Navbar>
</Router>

Navbar.svelte

<script>
    import { Link } from 'svelte-routing';
</script>

<nav>
    <div class="nav-wrapper">
        <Link to="/" class="brand-logo">svelte app</Link>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </div>
</nav>

and i also found this question/answer on SO that seem to say that the tutorial is ok and working for people so i'm confused.

`css({ output: 'public\extra.css'}),` I guess it's just esacping the `e`. Check wether it did write the css to `'publicextra.css'`; and use slashes `/` — Thomas, Feb 14 '20 at 13:41
Hi @Thomas thank but i tried both ways. i thought it was a path-ing issue because I'm working with windows but both `/` and `\` have the same result - there are no additional files in the folder after running — Avishay Cohen, Feb 14 '20 at 13:44

score 4 · Answer 1 · answered Jul 31 '21 at 12:02

I had the same issue while following along with the tutorial. After hitting my head for some time I realized that inside the public/build directory it was creating this public/build/extra.css, so first see if your file structure is similar to mine (picture below)

file structure initially

Then what I did was in the rollup.config.js, I changed the output from public/build/extra.css to extra.css

...

    svelte({
        compilerOptions: {
            // 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) => {
    css.write('public/build/bundle.css');
  }
        }
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'extra.css' }),
...

I hope this solves your problem as well.

score 0 · Answer 2 · answered Feb 19 '20 at 14:51

0

I have a similiar setup and it works for me. I only noticed that I import materialize.css instead of materialize.min.css and that I have no matierialize.min.css in my node_modules/materialize-css/dist/css/ folder.

Maybe that's the solution to that riddle: you may try importing a non-existing css file.

answered Feb 19 '20 at 14:51

Andreas Dolk

113,398
19
180
268

hi @andreas_D thanks for the reply, i checked and i have both the minified files and the normal css/js files. i tried importing the non-minified files and got the same result. i also thought it might be related to caching in the browser and made sure that my browser (opera) is not caching – Avishay Cohen Feb 21 '20 at 09:18

score 0 · Answer 3 · answered Mar 10 '21 at 09:02

I got stuck in the same problem. It can be fixed by using Rollup's callback function instead of the simpler file name definition:

css({
    output: function (styles, styleNodes) {
        console.log('Writing bundled CSS.');
        fs.writeFileSync('static/bundle.css', styles);
    }
})

This requires Filesystem to be defined beforehand:

const fs = require('fs');

svelte CSS file isn't generate on run

3 Answers3