Sapper - 导入的 scss 样式消失

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 中访问正文，还是有特殊的方法可以做到这一点？

Answer 1

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

...
%sapper.base%

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