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

Question

我通过npm init vue@latest 使用 Vite 创建了一个新的 Vue 应用程序。我基于the official guide在项目中添加了TailwindCSS。

运行npm run lint 会抛出错误

error 'module' is not defined 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。 ESLint 的 env 需要在这些配置文件中设置为 node，因为 Node 是构建期间的实际环境。

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

在postcss.config.js 和tailwind.config.js 的顶部插入此评论：

/* eslint-env node */

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

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

// .eslintrc.cjs
module.exports = {
  ⋮
  overrides: [
    {
      files: ['*.config.js'],
      env: {
        node: true,
      },
    },
  ],
}

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

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

将 ignorePatterns 配置为不对这些配置文件进行 lint：

// .eslintrc.cjs
module.exports = {
  ⋮
  ignorePatterns: ['*.config.js'],
}

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