无法使用 Parcel 和 postcss-custom-properties 设置 CSS 变量

Question

我正试图根据本文档中描述的技术2来设计FullCalendar的样式。它说我应该将PostCSS与postpass自定义属性和Postpass计算一起使用。

我的项目使用Parcel进行捆绑，而不是像FullCalendar那样使用WebPack，但根据我的理解，在Parcel中使用PostCSS应该是即插即用的，包括一个postpass.config.js文件，所以我认为这应该不是一个大问题。这个文件是这样的：

module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css' 
]
}),
require('postcss-postcss-calc')
]
};

所以我有一个文件src/style/fullcalendar vars.css。为了测试的目的，它看起来像这样：

:root {
--fc-button-bg-color: red;
}

但一切都没有改变。当我查看开发工具时，没有设置CSS变量。我错过什么了吗？

我不知道我是否能给你更多的信息，我不能分享Stacklitz或其他任何东西，因为问题在于构建过程。但我可以链接到我现在所在的github存储库，这样你就可以查看其他文件，看看哪里出了问题https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d

谢谢！

Answer 1

我认为问题是我在其他方面都使用了scs。一个简单得多的解决方案是将fullcalendar-vars.css的文件扩展名更改为scss并将其导入main.scss。没有麻烦，一切都像一个魅力！我终于可以拥有我漂亮的鲜红色纽扣了；(