Snowpack 和 postcss-import？

问题描述

我正在尝试将 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 完成。
2. 到处使用相对路径（./colors.css 或 ../../colors.css）
3. @import 使用变量的地方的变量文件
4. 从postcss-simple-vars切换到postcss-custom-properties

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