Fullcalendar custom css with Vue3 and postcss

Question

I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.

vue version

"vue": "^3.2.26",

I am getting error

Syntax Error: Error: PostCSS plugin postcss-custom-properties requires PostCSS 8.

I am following steps mentioned in fullcalendar documentation.

fullcalendar-vars.css

:root {
  --fc-border-color: green;
  --fc-button-text-color: #ff0000;
}

I have installed following packages

"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",

Added postcss.config.js at root

module.exports = {
    plugins: [
      require('postcss-custom-properties')({
        preserve: false, // completely reduce all css vars
        importFrom: [
          'client/fullcalendar-vars.css' // look here for the new values
        ]
      }),
      require('postcss-calc')
    ]
  }

And my vue.config.js as follow

const path = require("path");
module.exports = {
  pages: {
    index: {
      entry: "./client/main.js",
    },
  },
  outputDir: path.resolve(__dirname, "./client/dist"),
};

Also I would like to know, Do I need make any changes in vue.config.js?

Answer 1

PostCSS error

Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.

To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:

npm uninstall --save-dev postcss postcss-calc postcss-loader

Starting from scratch

To setup custom colors for FullCalendar in a Vue CLI scaffolded project:

1. Install postcss-custom-properties with:

   npm install --save-dev postcss-custom-properties
   

2. Create postcss.config.js with the following PostCSS configuration:

   // <projectRoot>/postcss.config.js
   module.exports = {
     plugins: [
       require("postcss-custom-properties")({
         preserve: false,
         importFrom: [
           "client/fullcalendar-vars.css",
         ],
       }),
       require("postcss-calc"),
     ],
   }
   

3. Create fullcalendar-vars.css with the following CSS:

   /* <projectRoot>/client/fullcalendar-vars.css */
   :root {
     --fc-border-color: green;
     --fc-button-text-color: #ff0000;
   }
   

   Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.

4. Start the Vue CLI dev server with:

   npm run serve
   

demo