Use postcss-normalize with Svelte

Question

I didn't manage to import postcss-normalize to Svelte using official starting boileprlate and svelte-preprocess.

My rollup config:

…
plugins: [
  svelte({
    preprocess: sveltePreprocess({
      sourceMap: !production,
      defaults: {
        style: "scss",
      },
      scss: {
        prependData: '@import "sass-mediaqueries/media-queries";',
      },
    }),
    compilerOptions: {
      // enable run-time checks when not in production
      dev: !production,
    },
    postcss: {
      plugins: [
        // postcssImport(postcssNormalize().postcssImport({ path: ["src"] })),
        postcssNormalize(),
        autoprefixer(),
      ]
    }
  }),
  // we'll extract any component CSS out into
  // a separate file - better for performance
  css({ output: "bundle.css" }),
  …

I import it like this in App.svelte:

<style global>
  @import-normalize;
  @import-sanitize;
  @import "global.scss";
</style>

No normalize neither sanitize css gets into the bundled bundle.css. No errors or warnings.

As you can see in the config above I also tried to import it using postcss-import plugin as found in the postcss-normalize Github page and Github issues. No luck so far. Any help appreciated.

Answer 1

I would suggest you to learn SvelteKit. To add normalize.css to SvelteKit follow the next steps:

1. $ npm install normalize.css
2. $ touch src/routes/__layout.svelte

In the __layout.svelte you must add the following:

<script>
  import 'normalize.css'
</script>

<slot/>