tailwindcss在vite esm模式下的配置修改

vite6将弃用cjs（CommonJS ）采用ESM（ESModule），所有的js文件将编译为ESM语法，参考https://cn.vitejs.dev/guide/troubleshooting

基于ESM方式，我们需要对导出导入方式和postcss插件加载方式进行调整

postcss.config.js

import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

export default {
  plugins: [
    tailwindcss(),
    autoprefixer(),
  ]
}

如果是在vite.config.ts中配置的postcss，require() 是 nodejs的方法，自然无法使用了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
//require('tailwindcss'),
        //require('autoprefixer'),
        tailwindcss(),
    autoprefixer(),
      ]
    }
  }
})

如果postcss插件使用了px转vw，一定要写在 autoprefixer() 后面

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
//require('tailwindcss'),
        //require('autoprefixer'),
        tailwindcss(),
    autoprefixer(),
    postcsspxtoviewport8plugin({...})
      ]
    }
  }
})

原文地址：https://blog.csdn.net/qq_33982898/article/details/136763911

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！