使用 Vue3 和 postcss 的 Fullcalendar 自定义 css

Question

我正在使用 vue3 的 fullcalendar。我想更改全日历中按钮和文本的颜色。

vue 版本

"vue": "^3.2.26",

我收到错误

语法错误：错误：PostCSS 插件 postcss-custom-properties 需要 PostCSS 8。

我按照 fullcalendar 文档中提到的步骤操作。

fullcalendar-vars.css

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

我已经安装了以下软件包

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

在根目录添加了 postcss.config.js

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')
    ]
  }

和我的 vue.config.js 如下

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

另外我我想知道，我需要对 vue.config.js 进行任何更改吗？

Answer 1

PostCSS 错误

Vue CLI 脚手架项目 已经包含 PostCSS （包括 postcss< /code>、postcss-calc 和 postcss-loader），因此您无需在项目中安装它。这里唯一需要的依赖是 postcss-custom-properties。

要解决 PostCSS 错误，您应该卸载错误添加的 PostCSS 依赖项：

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

从头开始

要在 Vue CLI 脚手架项目中为 FullCalendar 设置自定义颜色：

1. 安装 postcss-custom-properties与：

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

2. 使用以下 PostCSS 配置创建 postcss.config.js：

   // /postcss.config.js
   模块. 导出 = {
     插件：[
       需要（“postcss-自定义属性”）（{
         保留：假，
         导入来源：[
           “客户端/fullcalendar-vars.css”，
         ],
       }),
       需要（“postcss-calc”），
     ],
   }
   

3. 使用以下 CSS 创建 fullcalendar-vars.css：

   /* /client/fullcalendar-vars.css */
   ：根 {
     --fc-边框颜色：绿色；
     --fc-按钮-文本-颜色：#ff0000；
   }
   

   注意：对此文件的更改不会热重新加载，因此开发服务器必须重新启动才能反映任何更新。

4. 启动 Vue CLI 开发服务器：

   npm runserve
   

demo< /a>