Svelte：有没有办法在 Svelte 组件的范围内创建全局 css 变量？

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{} 的文件，然后是其余的组件样式。

Answer 1

我正忙于此，尝试不同的 webpack 设置等，看到输出 css 应该有效，但我就是找不到为什么它不起作用。我在最后一次尝试之前写了 post，这又浪费了一个小时。我终于找到错误了。

我没有使用 :root{}，而是打错了 --root{}。无论如何，我已经 post 编辑了它，以防有人犯同样的错误。

Answer 2

在主要组件中打印下面的代码

:global(:root){
   --header-color: purple
}

进入你的其他文件就用它:

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

Svelte：有没有办法在 Svelte 组件的范围内创建全局 css 变量？

Svelte: Is there a way to make global css variables in scope of svelte components?

css

css-variables

svelte