Svelte：有没有一种方法可以使全局css变量适用于Svelte组件的范围？

Question

我已经设置了我的global.css文件，并在index.js中导入它。

--root {
  --main-color: red;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

index.js

import "./global.css";
import App from "./App.svelte";

const app = new App({
  target: document.body
});

我的Webpack配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: "svelte-loader",
          options: {
            emitCss: true,
            hotReload: true
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: { loader: "style-loader", options: { sourceMap: true } },
          use: [
            { loader: "css-loader", options: { sourceMap: true } },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true,
                ident: "postcss",
                plugins: loader => [
                  require("postcss-import")({}),
                  require("postcss-preset-env")(),
                  require("cssnano")()
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(), new ExtractTextPlugin("styles.css")]
};

很适合为整个应用程序设置全局CSS。但是我正在尝试在我的Svelte组件中使用--main-color。是否有一种方法将它们注入到所有组件的CSS中？

由于我先导入global.css，因此它应该起作用，因为它首先发出一个带有--root {}的文件，然后是其余组件样式。

- frank3stein

---

你的意思是选择器里应该用":root"吗？我从来没见过"--root"这个选择器。 - Mig

Answer 1

您可以将全局样式放在 /routes/index.svelte 文件中，就像下面的示例：

<style>
    :global(:root){
       --header-color: purple
    }
</style>

然后就像通常使用CSS变量一样，可以在任何地方直接使用它：

  h1 {
         color: var(--header-color);
  }

- Ivan Afanasyev

---

下次请您把回答描述得更详细一些。 - mbappai

“主要组件”是哪个文件？App.svelte吗？ - Ken

有没有办法从子组件传递 var() 到父组件的 :global() 中？我在这里问一下，如果你知道，请告诉我。谢谢。https://dev59.com/C3oPtIcB2Jgan1znyWm5 - user19485937

我们是否能为那些变量获得智能感知？ - cikatomo

Answer 2

我忙于这个事情，尝试不同的webpack设置，看到输出的css应该能工作，但就是找不到为什么它不起作用。在尝试最后一次之前，我写了这篇文章，浪费了又一个小时。最终我找到了错误。

我误打成了--root{}而不是正确的:root{}。无论如何，我还是发布了它，以防有人卡在同样的错误上。

- frank3stein