Snowpack 和 postcss 导入？

Posted 2023-03-06

【中文标题】Snowpack 和 postcss 导入？

【英文标题】：Snowpack and postcss-import?

【发布时间】：2021-05-05 00:40:34

【问题描述】：

我正在尝试将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。

【参考方案1】：

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

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

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

【讨论】：

我已经发送了一个拉取请求，其中包含对您的存储库的修复。希望对您有所帮助。

感谢您的工作。但是postcss-simple-vars 和postcss-custom-properties 不太相似，不是吗？

The import is done by Snowpack. 是什么意思？为什么要从dist 导入？ @import "/dist/style/tailwind.css"; 和 @import "/dist/style/colors.css";?