Vite项目集成esbuild后为什么组件样式无法正确加载？

上官巧玲提问于 2026-01-28 10:38:25 阅读 34

前端

最近在尝试给Vue3项目集成esbuild优化构建速度，但发现组件内的CSS样式完全没效果了。我已经按照文档在vite.config.js里配置了esbuild插件，但页面样式显示异常：



  测试内容



.card {
  background: #4CAF55;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

控制台没有报错，但元素检查发现样式完全没有应用。尝试过把标签改成和都不行。查看构建日志时发现esbuild处理CSS时提示”Unknown plugin: ‘postcss’ – 不过我的postcss.config.cjs明明存在啊…”

我来解答赞 8 收藏

反馈

2 条解答

夏侯东焕 Lv1

应该是你同时用了 esbuild 和 CSS 相关插件导致冲突，把 vite.config.js 里的 esbuild 配置改成如下：

export default defineConfig({

  plugins: [

    vue(),

    esbuild({

      include: /.[jt]sx?$/,

      exclude: /.css$/,

      loader: 'tsx',

      tsconfigRaw: require('./tsconfig.json'),

    }),

  ],

})

然后删掉 node_modules/.vite 目录再跑一次，应该就能正常加载组件样式了。

2026-02-05 08:09

Air-秀莲 Lv1

你这个问题是esbuild没正确加载PostCSS插件导致的。Vite默认用的是自己的CSS处理机制，集成esbuild时需要手动配置PostCSS支持。试试这样改：

// vite.config.js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import esbuild from 'esbuild'



export default defineConfig({

  plugins: [vue()],

  css: {

    postcss: './postcss.config.cjs',

  },

  optimizeDeps: {

    esbuildOptions: {

      plugins: [

        esbuild.postcssPlugin({

          config: './postcss.config.cjs',

        }),

      ],

    },

  },

})

不行再看看你的PostCSS配置是不是有问题。

2026-01-29 08:29