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

Question

我通过npm init vue@latest使用 Vite 创建了一个新的 Vue 应用程序。 我根据官方指南将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。 ESLint 的env需要在这些配置文件中设置为node ，因为 Node 是构建期间的实际环境。

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

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

/* eslint-env node */

配置overrides以设置*.config.js env的环境：

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

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

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

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

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

Answer 2

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