Snowpack 和 postcss 导入？

Question

我正在尝试将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 并尝试了所有方法：我没有运气！ ????

我无法将带有@import 的嵌套.css 导入为：

@import "./colors.css";

也不是：

@import "colors.css";

因此，我无法使用postcss-simple-vars。

Answer 1

最后我找到了一个对我有用的解决方案：

1. 移除 postcss-import 插件：导入由 Snowpack 完成。
2. 到处都使用相对路径（./colors.css 或 ../../colors.css）
3. @import 使用变量的任何地方的变量文件
4. 从postcss-simple-vars 切换到postcss-custom-properties

我不确定第 3 步和第 4 步是否必要，至少这对我有用。使用properties 而不是simple vars，代码看起来也更简洁。