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

Question

构建一个 Vite2 应用程序。
尝试导入 ESModule在 tailwind.config.js .
模块被导出为:

export default xxx;

然后我在 tailwind.config.js 中导入了模块喜欢:

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

但我得到一个错误:

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

我该如何解决？

Answer 1

我从 Vite Discord channel 得到了答复。这是将 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,
},