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

问题描述

我正在尝试根据FullCalendar中所述的技术2为this documentation设置样式。它说我应该对 postcss-custom-properties 和 postcss-calc 使用 PostCSS 。

我的项目使用Parcel进行捆绑，而不像示例中的FullCalendar那样使用WebPack，但是据我了解，using PostCSS in Parcel应该只是通过包含 postcss.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变量。我错过了什么吗？

我不知道是否能为您提供更多信息，我无法共享Stackblitz或其他任何afaik，因为问题在于构建过程中。但是我可以链接到我现在所在的github存储库，以便您可以查看其他文件，看看有什么问题https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d

谢谢！

解决方法

我认为问题是我在其他所有内容上都使用了scss。一个更简单的解决方案是将fullcalendar-vars.css的文件扩展名更改为scss并将其导入main.scss中。不用麻烦，一切都像魅力一样！最后，我可以使用非常漂亮的红色按钮;）