使用 Vue3 和 postcss 的全日历自定义 css

Question

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

vue版本

"vue": "^3.2.26",

我遇到错误

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

我正在执行 fullcalendar documentation 中提到的步骤。

全日历-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",

在 root

添加了 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 脚手架项目already include PostCSS（包括postcss、postcss-calc、postcss-loader），所以你不需要在你的项目中安装它。这里唯一需要的依赖是 postcss-custom-properties.

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

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

从零开始

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

安装 postcss-custom-properties 使用：

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

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

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

使用以下 CSS 创建 fullcalendar-vars.css:
```
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
  --fc-border-color: green;
  --fc-button-text-color: #ff0000;
}
```
注意： 对此文件的更改不是 hot-reloaded，因此必须重新启动 dev 服务器 以反映任何更新.
启动 Vue CLI 开发服务器：
```
npm run serve
```

demo

使用 Vue3 和 postcss 的全日历自定义 css

Fullcalendar custom css with Vue3 and postcss

fullcalendar

vue.js

postcss

vue-cli

vuejs3

PostCSS错误

从零开始