范围 CSS 仅适用于 Svelte-Sapper 中的特定组件

Question

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

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

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

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

我在两个 css 文件中都使用了 header 选择器。当我从索引路由到其他页面时，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"
  }

Answer 1

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

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