Снежный покров и postcss-импорт?

Я пытаюсь использовать postcss-simple-vars с Snowpack.

REPL: https://github.com/frederikhors/snowpack-svelte-tailwindcss

Я использую https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript

Я пытаюсь использовать это так:

• postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('tailwindcss'),
    require('autoprefixer'),
    ...(production ? [require('cssnano')] : [])
  ],
};

• index.js:

import "./index.css";

• index.css:

@tailwind base;
@tailwind components;

@import "./colors.css";

@tailwind utilities;

body {
  background-color: $my-custom-bgcolor;
}

• colors.css:

$my-custom-bgcolor: #ff0000;

но он не может найти вары, почему?

Error: Command failed with exit code 1: postcss
CssSyntaxError: postcss-simple-vars: C:\project\stdin:28:3: Undefined variable $my-custom-bgcolor

Вы можете мне помочь?

ОБНОВЛЕНИЕ:

Я прочитал все https://github.com/snowpackjs/snowpack/discussions/1693 и все перепробовал: НЕ УДАЧИ! ????

Я не могу импортировать вложенные .css с @import как:

@import "./colors.css";

ни как:

@import "colors.css";

Вследствие этого я не могу использовать postcss-simple-vars.