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

Question

我正在尝试设计我的 FullCalendar according to technique 2 as described in this documentation。它说我应该使用 PostCSS 和 postcss-custom-properties和 postcss-calc.

我的项目使用 Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, 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，因为问题出在构建过程中。但是我可以 link 到我现在所在的 github 存储库，这样你就可以查看其他文件，看看有什么问题 https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d

谢谢！

Answer 1

我认为问题在于我将 scss 用于其他一切。一个更简单的解决方案是将 fullcalendar-vars.css 的文件扩展名更改为 scss 并将其导入到 main.scss 中。没有麻烦，一切都像魅力一样！我终于可以拥有漂亮的红色按钮了 ;)

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

Can't set CSS variables with Parcel and postcss-custom-properties

css

fullcalendar

css-variables

postcss

parceljs