Sapper

Question

我有一个奇怪的问题，可能与摇树相关。我构建了一个 sapper 应用程序，在我的 rollup 配置中，我使用 svelte-preprocess package 并像这样配置它：

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,
  },
};

通过 scss 插件，我复制了全局样式表 main.scss。除了 body 的样式外，其中的所有样式似乎都已应用。不知何故这些被忽略了，因为当我在开发控制台中检查主体样式时，它是空的。您不能在 Sapper 中访问 body 还是有特殊的方法可以做到这一点？

Answer 1

问题是 Sapper 的主体是 template.html 文件的一部分。这意味着没有带有 body 元素的组件。 Svelte 将删除组件中未使用的样式，除非它们明确标记为 global。 global preprocessor 可以帮助解决这个问题。我想在你的情况下，我会让捆绑器为 template.html 创建一个单独的 css 文件，并像 global.css:

一样明确地包含它

...
%sapper.base%

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

Sapper - 导入的 scss 样式消失

Sapper - imported scss styles disappear

sass

svelte

rollup