如何解决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
。
解决方法
最后我找到了一个对我有用的解决方案:
- 删除
postcss-import
插件:导入由 Snowpack 完成。 - 到处使用相对路径(
./colors.css
或../../colors.css
) -
@import
使用变量的地方的变量文件 - 从
postcss-simple-vars
切换到postcss-custom-properties
我不确定第 3 步和第 4 步是否必要,至少这对我有用。使用 properties
而不是 simple vars
的代码看起来也更简洁。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。