Sapper - imported scss styles disappear

Question

I have a strange problem which may be related toe tree-shaking. I build a sapper app and in my rollup config, I use the svelte-preprocess package and configure it like this:

const preprocessOptions = {
  scss: {
    data: `@import '${join(process.cwd(), "src/styles/main.scss")}';`,
    includePaths: ["node_modules", "src"],
  },
  postcss: {
    plugins: [
      require("autoprefixer"),
      require("cssnano")({
        preset: "default",
      }),
    ],
    minimize: !isDevelopment,
    sourceMap: isDevelopment,
  },
};

Via the scss plugin I copy the global stylesheet main.scss. All of the styles out of it seem to get applied, except for the styles of the body. Somehow these get ignored, because when I check the body styles in the dev console, it is empty. Can't you access the body in Sapper or is there maybe a special way to do this?

Answer 1

The problem is that with Sapper the body is part of the template.html file. That means there's no component with a body element. Svelte will remove styles that are not used in your component unless they are explicitly marked as global. The global preprocessor can help with this. I think in your case I would just get the bundler to create a separate css file for the template.html and include it explicitly like the global.css:

...
%sapper.base%

<link rel='stylesheet' href='global.css'>
...