title: Svelte not running with postcss
body: <p>I was working on a project with Svelte, when I came back and I run the project, I had an error with postcss. I had this error <strong>[svelte-preprocess] PostCSS configuration was not passed or is invalid. If you expect to load it from a file make sure to install &quot;postcss-load-config&quot; and try again.</strong>
  I've tried to add postcss.config.js with an empty export.module and here the server don't run</p>
  <p><a href="https://i.stack.imgur.com/sYy8q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sYy8q.png" alt="enter image description here" /></a></p>
  <p><strong>rollup.config.js</strong></p>
  <pre><code>import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import livereload from &quot;rollup-plugin-livereload&quot;;
  import { terser } from &quot;rollup-plugin-terser&quot;;
  import sveltePreprocess from &quot;svelte-preprocess&quot;;
  import typescript from &quot;@rollup/plugin-typescript&quot;;
  import css from &quot;rollup-plugin-css-only&quot;;
  import json from &quot;rollup-plugin-json&quot;;
  
  const production = !process.env.ROLLUP_WATCH;
  
  function serve() {
    let server;
  
    function toExit() {
      if (server) server.kill(0);
    }
  
    return {
      writeBundle() {
        if (server) return;
        server = require(&quot;child_process&quot;).spawn(
          &quot;npm&quot;,
          [&quot;run&quot;, &quot;start&quot;, &quot;--&quot;, &quot;--dev&quot;],
          {
            stdio: [&quot;ignore&quot;, &quot;inherit&quot;, &quot;inherit&quot;],
            shell: true,
          }
        );
  
        process.on(&quot;SIGTERM&quot;, toExit);
        process.on(&quot;exit&quot;, toExit);
      },
    };
  }
  
  export default {
    input: &quot;src/main.ts&quot;,
    output: {
      sourcemap: !production,
      format: &quot;iife&quot;,
      name: &quot;app&quot;,
      file: &quot;public/build/bundle.js&quot;,
    },
    plugins: [
      svelte({
        preprocess: sveltePreprocess({ sourceMap: !production, postcss: true }),
        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({ output: &quot;bundle.css&quot; }),
  
      // If you have external dependencies installed from
      // npm, you'll most likely need these plugins. In
      // some cases you'll need additional configuration -
      // consult the documentation for details:
      // https://github.com/rollup/plugins/tree/master/packages/commonjs
      resolve({
        browser: true,
        dedupe: [&quot;svelte&quot;],
      }),
      commonjs(),
      typescript(),
      json(),
  
      // In dev mode, call `npm run start` once
      // the bundle has been generated
      !production &amp;&amp; serve(),
  
      // Watch the `public` directory and refresh the
      // browser on changes when not in production
      !production &amp;&amp; livereload(&quot;public&quot;),
  
      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production &amp;&amp; terser(),
    ],
    watch: {
      clearScreen: false,
    },
    inlineDynamicImports: true,
  };
  </code></pre>
  <p>Here is the
  <strong>package.json</strong></p>
  <pre><code>{
    &quot;devDependencies&quot;: {
      &quot;@rollup/plugin-commonjs&quot;: &quot;^17.0.0&quot;,
      &quot;@rollup/plugin-json&quot;: &quot;^4.1.0&quot;,
      &quot;@rollup/plugin-node-resolve&quot;: &quot;^11.0.0&quot;,
      &quot;@rollup/plugin-typescript&quot;: &quot;^8.0.0&quot;,
      &quot;@tsconfig/svelte&quot;: &quot;^2.0.0&quot;,
      &quot;carbon-components-svelte&quot;: &quot;^0.62.3&quot;,
      &quot;carbon-icons-svelte&quot;: &quot;^10.44.4&quot;,
      &quot;postcss-import&quot;: &quot;^14.1.0&quot;,
      &quot;rollup&quot;: &quot;^2.3.4&quot;,
      &quot;rollup-plugin-css-only&quot;: &quot;^3.1.0&quot;,
      &quot;rollup-plugin-livereload&quot;: &quot;^2.0.0&quot;,
      &quot;rollup-plugin-svelte&quot;: &quot;^7.0.0&quot;,
      &quot;rollup-plugin-terser&quot;: &quot;^7.0.0&quot;,
      &quot;svelte&quot;: &quot;^3.0.0&quot;,
      &quot;svelte-check&quot;: &quot;^2.0.0&quot;,
      &quot;svelte-clipboard&quot;: &quot;^1.0.0&quot;,
      &quot;svelte-preprocess&quot;: &quot;^4.10.5&quot;,
      &quot;tinro&quot;: &quot;^0.6.12&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.0.0&quot;,
      &quot;postcss&quot;: &quot;^8.4.12&quot;,
      &quot;postcss-load-config&quot;: &quot;^3.1.4&quot;,
      &quot;autoprefixer&quot;: &quot;^10.4.4&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@sentry/browser&quot;: &quot;^6.17.8&quot;,
      &quot;@sentry/tracing&quot;: &quot;^6.17.8&quot;,
      &quot;@splidejs/svelte-splide&quot;: &quot;^0.1.18&quot;,
      &quot;axios&quot;: &quot;^0.21.1&quot;,
      &quot;firebase&quot;: &quot;^9.6.6&quot;,
      &quot;postcss-load-config&quot;: &quot;^3.1.4&quot;,
      &quot;rollup-plugin-json&quot;: &quot;^4.0.0&quot;,
      &quot;sirv-cli&quot;: &quot;^2.0.0&quot;,
      &quot;svelte-csv&quot;: &quot;^1.2.8&quot;,
      &quot;svelte-materialify&quot;: &quot;^0.3.11&quot;,
      &quot;svelte-navigator&quot;: &quot;^3.1.5&quot;,
      &quot;svelte-time-picker&quot;: &quot;^2.0.0&quot;
    }
  }
  
  </code></pre>