在第2章中，如何在tailwind.config.js中导入ESModule

Question

构建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

如何解决这个问题?

Answer 1

我从vitite 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,
},