Svelte-Sapper 中仅特定组件的作用域 CSS

问题描述

这是我在 sapper a 项目中的文件结构（仅相关文件）：

src/
    -routes/
        -_layout.svelte
        -index.svelte
        -other.svelte
    -styles/
        -index.css
        -other.css

我通过这种方法导入css文件：

<script>
  import '../styles/index.css'
</script>

我在两个 css 文件中都使用了 header 选择器。当我从 index 路由到其他页面时，index.css 的标题样式也应用于 other.svelte 页面。但如果我在浏览器中刷新 /other 页面，它看起来没问题。

我想将我的样式范围限定在特定页面中。如何限制其他页面的样式？

这是我从 package.json 中的依赖项：

  "dependencies": {
    "compression": "^1.7.1","polka": "next","sirv": "^1.0.0"
  },"devDependencies": {
    "sapper": "^0.28.0","svelte": "^3.17.3","@babel/core": "^7.0.0","@babel/plugin-Syntax-dynamic-import": "^7.0.0","@babel/plugin-transform-runtime": "^7.0.0","@babel/preset-env": "^7.0.0","@babel/runtime": "^7.0.0","@rollup/plugin-babel": "^5.0.0","@rollup/plugin-commonjs": "^14.0.0","@rollup/plugin-node-resolve": "^8.0.0","@rollup/plugin-replace": "^2.2.0","@rollup/plugin-url": "^5.0.0","rollup": "^2.3.4","rollup-plugin-svelte": "^6.0.0","rollup-plugin-terser": "^7.0.0"
  }

解决方法

定义特定于路由的样式的最简单方法是直接在 Sapper 路由文件的 <style></style> 部分（在您的情况下为 index.svelte 和 other.svelte）编写您的 css。

这些样式将优先于从 global.css 加载的 template.html 样式表（如果您使用 Sapper 模板应用）。