Svelte: Есть ли способ сделать глобальные переменные CSS в области компонентов svelte? - PullRequest
Новая
       41

Svelte: Есть ли способ сделать глобальные переменные CSS в области компонентов svelte?

1 голос
/ 10 мая 2019

Я установил свой файл 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
});

Моя настройка веб-пакета 

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 для всего приложения. Но я пытаюсь использовать --main-color в моих компонентах svelte. Есть ли способ внедрить их в CSS всех компонентов?

Поскольку я сначала импортирую global.css, он должен работать, поскольку сначала он генерирует файл с параметром --root {}, а затем остальные стили компонента.

Ответы [ 2 ]

2 голосов
/ 10 мая 2019

Я был занят этим, пробовал разные настройки веб-пакетов и т. Д., Видя, что выходной css должен работать, я просто не мог найти, почему он не работал. Я написал пост, прежде чем пытаться в последний раз, который потратил впустую еще час. Я наконец нашел ошибку.

Вместо использования :root{} я набрал его --root{}. В любом случае я опубликовал это на тот случай, если кто-то застрянет с той же ошибкой.

0 голосов
/ 17 июля 2019

Печать кода ниже в основном компоненте 

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

в другой файл, просто используйте его: 

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