Webpack导入CSS为JS代码而非字符串问题求助（Chrome扩展开发）

问题出在你的Webpack loader配置顺序和loader选择上，直接按以下步骤修改即可解决：

核心修改点 #

1. 移除style-loader：它的作用是将CSS转换为JS代码并注入到DOM中，完全和你需要获取CSS字符串的需求冲突，这也是你控制台输出JS代码的直接原因。
2. 调整loader执行顺序：Webpack的loader是从右到左（从下到上）执行的，确保样式预处理loader（postcss、css）先执行，最后用raw-loader（或Webpack 5内置的asset/source）把处理后的CSS转为字符串导出。
3. 明确css-loader的导出类型：设置exportType: 'string'，强制css-loader输出处理后的CSS字符串，而非默认的JS模块。

修改后的Webpack配置 #

方案1（使用raw-loader） #

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src/pages/Content'),
  use: [
    'raw-loader',
    { 
      loader: 'css-loader', 
      options: { 
        importLoaders: 1,
        exportType: 'string' // 明确指定导出CSS字符串
      } 
    },
    { 
      loader: 'postcss-loader', 
      options: { 
        postcssOptions: { 
          ident: 'postcss', 
          plugins: [tailwindcss, autoprefixer] 
        } 
      } 
    }
  ]
}

方案2（Webpack 5+ 推荐，无需raw-loader） #

Webpack 5内置了资源模块，可以直接用type: 'asset/source'替代raw-loader，更轻量化：

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src/pages/Content'),
  type: 'asset/source', // 等价于raw-loader，直接导出文件内容为字符串
  use: [
    { 
      loader: 'css-loader', 
      options: { 
        importLoaders: 1,
        exportType: 'string'
      } 
    },
    { 
      loader: 'postcss-loader', 
      options: { 
        postcssOptions: { 
          ident: 'postcss', 
          plugins: [tailwindcss, autoprefixer] 
        } 
      } 
    }
  ]
}

为什么之前的配置失效？ #

• 你之前的配置包含style-loader，它会把css-loader处理后的CSS转换成一段用于注入DOM的JS代码，raw-loader只能把这段JS代码当成字符串导出，这就是你控制台看到的style-loader runtime代码。
• loader顺序错误：原顺序是raw-loader → style-loader → css-loader → postcss-loader，实际执行顺序是postcss → css → style → raw，style-loader已经把结果变成JS，raw-loader无法得到原始CSS。
• 仅用raw-loader时，postcss和css-loader未执行，Tailwind的@import和预处理逻辑没生效，导致样式未正确打包。

额外注意 #

确认你的第二条CSS规则确实通过exclude正确排除了src/pages/Content文件夹，避免两条规则互相干扰。

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