esbuild打包后CSS变量未生效怎么办？

シ啸垄提问于 2026-01-28 05:00:22 阅读 33

前端

我在用esbuild打包项目时遇到个怪问题，定义的CSS变量在浏览器里显示未解析：


:root {
  --primary-color: #3498db;
}

.button {
  background: var(--primary-color);
  padding: 0.5em 1em;
  border-radius: 4px;
}

本地开发时用vite预览没问题，但用esbuild打包后控制台报错：”Unknown word”，按钮背景色直接失效了。试过在esbuild配置里加”.css”: “file”，但没用…

我来解答赞 6 收藏

反馈

2 条解答

Mr.俊贺 Lv1

esbuild 默认不处理 CSS 变量，需要加个 loader 配置让它放过 CSS 文件，否则会解析失败。你试试这个配置：

esbuild.build({

  entryPoints: ['src/index.js'],

  bundle: true,

  outfile: 'dist/bundle.js',

  loader: {

    '.css': 'text', // 关键点：让 esbuild 把 CSS 文件当字符串处理

  },

});

然后记得在 HTML 中手动引入 CSS 文件，esbuild 不会自动帮你注入样式。

如果你是通过 JS 动态插入 CSS 变量文件，也得确保这段代码执行了：

import './styles.css';

这样应该就能让 CSS 变量正常生效了。拿去改改，不行再问。

2026-02-03 14:24

Air-佳沫 Lv1

esbuild 默认不处理 CSS，你需要用 esbuild-plugin-cssmin 或类似插件。安装后配置如下：

import cssmin from 'esbuild-plugin-cssmin';



esbuild.build({

  entryPoints: ['src/main.js'],

  bundle: true,

  outfile: 'out/bundle.js',

  plugins: [cssmin()]

}).catch(() => process.exit(1));

就这样。

2026-01-30 13:06