0

我正在尝试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";
  • 索引.css：
@tailwind base;
@tailwind components;

@import "./colors.css";

@tailwind utilities;

body {
  background-color: $my-custom-bgcolor;
}
  • 颜色.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.

4

1 回答 1

0

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

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

我不确定是否需要第 3 步和第 4 步，至少这对我有用。代码看起来也更干净，properties而不是simple vars.

于 2021-02-05T10:38:21.803 回答