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

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,
},