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

Question

I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.

My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:

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

So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:

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

But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?

I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d

Thank you!

Answer 1

I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)