无法从node_modules导入CSS：TypeScript+Web Dev Server运行异常求助

AI 小北

2026-7-2

TypeScript + Web Dev Server 导入CSS报MIME类型错误的解决方案

问题本质

Web Dev Server（wds）默认不会处理TypeScript文件中的CSS导入逻辑，TS转译后会保留import "xxx.css"语句，浏览器加载时会将CSS文件当作JavaScript模块解析，触发MIME类型不匹配的报错。你配置的typescript-plugin-css-modules仅用于给TypeScript编辑器提供类型提示，不负责处理实际的CSS资源加载。

可行解决方案

方案一：用@web/dev-server-esbuild快速处理

这个插件能在dev server中同时处理TypeScript转译和CSS导入，步骤如下：

安装依赖

npm install --save-dev @web/dev-server-esbuild

在项目根目录新建web-dev-server.config.mjs，写入配置：

import { esbuildPlugin } from '@web/dev-server-esbuild';

export default {
  plugins: [
    esbuildPlugin({
      ts: true, // 自动处理TypeScript转译
      css: true, // 处理CSS导入，将样式注入页面
    }),
  ],
};

修改启动命令，去掉单独的tsc执行（插件会自动处理TS转译）：

concurrently -k -r "wds --watch"

方案二：用Rollup插件实现更灵活的CSS处理

如果需要CSS Modules、自动前缀等进阶功能，可搭配Rollup插件：

安装依赖

npm install --save-dev @web/dev-server-rollup rollup-plugin-postcss

配置web-dev-server.config.mjs：

import { rollupPlugin } from '@web/dev-server-rollup';
import postcss from 'rollup-plugin-postcss';
import { esbuildPlugin } from '@web/dev-server-esbuild';

export default {
  plugins: [
    rollupPlugin(postcss({
      inject: true, // 将编译后的CSS注入到页面<head>
      // 如需启用CSS Modules，添加 modules: true
    })),
    esbuildPlugin({ ts: true }), // 处理TypeScript转译
  ],
};