如何将postcss.config.js和tailwind.config.js转换为ES模块？

Question

我使用 Vite via 创建了一个新的 Vue 应用程序npm init vue@latest。我根据官方指南将TailwindCSS添加到项目中。

运行npm run lint抛出错误

错误“模块”未定义 no-undef

因为它希望postcss.config.js和tailwind.config.js成为 ES 模块（我认为）。

当从postcss.config.js转换时

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

到

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

和tailwind.config.js来自

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

到

export const content = ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"];
export const theme = {
  extend: {},
};
export const plugins = [];

并且运行npm run dev应用程序崩溃并出现错误

[vite] 内部服务器错误：意外的令牌“导出”插件：vite：css

如何解决此 linting 错误？

Answer 1

实际上，您可以将这些配置文件保留为 CommonJS。env需要在这些配置文件中设置ESLint node，因为 Node 是构建期间的实际环境。

\n

选项 1：使用内联注释来配置 ESLint

\n

postcss.config.js将此注释插入到和的顶部tailwind.config.js：

\n

/* eslint-env node */\n

\n

选项 2：配置env为*.config.js

\n

配置文件overrides设置：env*.config.js

\n

// .eslintrc.cjs\nmodule.exports = {\n  \xe2\x8b\xae\n  overrides: [\n    {\n      files: [\'*.config.js\'],\n      env: {\n        node: true,\n      },\n    },\n  ],\n}\n

\n

如果使用 VS Code，您可能需要重新启动 ESLint 服务器（或 IDE）以重新加载配置。

\n

选项 3：禁用 ESLint 规则*.config.js

\n

配置ignorePatterns为不检查这些配置文件：

\n

// .eslintrc.cjs\nmodule.exports = {\n  \xe2\x8b\xae\n  ignorePatterns: [\'*.config.js\'],\n}\n

\n

如果使用 VS Code，您可能需要重新启动 ESLint 服务器（或 IDE）以重新加载配置。

\n

Answer 2

将文件重命名为postcss.config.cjsresp。tailwind.config.cjs。请注意cin cjs，它代表 CommonJS 模块。