在 Vite2 中，如何在 tailwind.config.js 中导入 ESModule

Posted 2023-03-07

【中文标题】在 Vite2 中，如何在 tailwind.config.js 中导入 ESModule

【英文标题】：In Vite2, How to import an ESModule in tailwind.config.js

【发布时间】：2021-05-29 20:11:31

【问题描述】：

构建一个 Vite2 应用程序。

尝试在tailwind.config.js 中导入ESModule。 模块被导出为：

export default xxx;

然后我在tailwind.config.js 中导入了模块，比如：

const xx = require('./xx/xxx');

但我得到一个错误：

[plugin:vite:css] Cannot use import statement outside a module

我该如何解决这个问题？

【参考方案1】：

我从 Vite Discord 频道得到了答复。这是将 postcss 和 tailwindcss 配置文件转换为 ESModule 的解决方案。

这样做，您可以在这些配置文件中使用import。

tailwind.config.js

export default 
  purge: ['./*.html', './src/**/*.vue,js,ts,jsx,tsx,css'],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

postcss.config.js

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default 
  plugins: [tailwind(tailwindConfig), autoprefixer],

vite.config.js 我添加了import postcss from './postcss.config.js' 和

css: 
  postcss,
,

【讨论】：

谢谢！

非常感谢！顺便说一句，可以为 webpack 使用.mjs 扩展名：await import('./postcss.config.mjs').then((m) => m.default)