使用Webpack css-loader加载CSS时出错，请求排查解决

错误原因分析 #

你遇到的编译错误，是因为Webpack将css-loader处理后生成的JS代码误当作CSS文件解析了，大概率是以下原因之一：

• Webpack配置中存在冲突的CSS处理规则
• css-loader版本与Webpack版本不兼容
• 规则未覆盖node_modules中的tippy.css文件

而直接requireCSS得到空对象，是因为Webpack在没有对应loader处理时，会默认将CSS文件当作空模块导出。

解决方案 #

针对你需要将CSS注入ShadowRoot的需求，核心是让Webpack把CSS文件导出为纯字符串，这样你可以直接拿到文本内容注入。

方案一：用css-loader导出字符串（推荐，适配css-loader v4+） #

修改Webpack的CSS规则，添加exportType: 'string'配置，并确保规则覆盖tippy.js的CSS文件：

{
  test: /\.css$/i,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/tippy.js') // 明确包含tippy的CSS
  ],
  use: [
    {
      loader: 'css-loader',
      options: {
        url: false, // 保持你原有的配置，禁用url解析
        exportType: 'string' // 关键：导出纯CSS字符串
      }
    }
  ]
}

在TypeScript中导入并使用：

import tippyCss from 'tippy.js/dist/tippy.css';

// 注入到ShadowRoot
const styleEl = document.createElement('style');
styleEl.textContent = tippyCss;
yourShadowRoot.appendChild(styleEl);

方案二：用raw-loader直接加载CSS字符串 #

如果觉得css-loader配置复杂，可以使用raw-loader直接读取CSS文本：

1. 安装依赖：

npm install raw-loader --save-dev

2. 修改Webpack规则：

{
  test: /\.css$/i,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/tippy.js')
  ],
  use: 'raw-loader'
}

导入和使用方式与方案一完全一致。

补充：TypeScript类型声明 #

为了避免导入CSS时出现类型错误，在项目根目录创建typings.d.ts文件：

declare module '*.css' {
  const content: string;
  export default content;
}

内容的提问来源于stack exchange，提问作者HenriChab