[Vuejs]-Fullcalendar custom css with Vue3 and postcss

by

0👍

✅

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

Leave a comment