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

Question

构建一个 Vite2 应用程序。

试图导入一个ESModulein 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

I got an answer from Vite Discord channel. This is the solution to convert postcss and tailwindcss config files to ESModule.

Do this, and you can use import in those config files.

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 I added import postcss from './postcss.config.js' and

css: {
  postcss,
},