时间戳

首页 > 解决方案 > Sapper - 导入的 scss 样式消失

sass - Sapper - 导入的 scss 样式消失

问题描述

我有一个奇怪的问题，可能与脚趾摇晃有关。我构建了一个工兵应用程序，在我的汇总配置中，我使用了svelte-preprocess 包并像这样配置它：

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

标签： sasssvelterollupsapper

解决方案

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

...
%sapper.base%

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

推荐阅读