Webpack raw-loader/style-loader 将 CSS 文件导入为 JavaScript 字符串而不是 CSS 内容

Question

我正在使用 Webpack 构建我的 chrome 扩展，并尝试将 CSS 文件作为字符串导入，以便我可以将其注入到影子 DOM 中。但是，当我导入 CSS 文件时，它会作为 JavaScript 代码而不是 CSS 内容导入。

导入的 CSS 字符串的内容。

import css from './content.styles.css';
console.log(css);

    import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
      import domAPI from "!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
      import insertFn from "!../../../node_modules/style-loader/dist/runtime/insertBySelector.js";
      import setAttributes from "!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js";
      import insertStyleElement from "!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js";
....
....

这是我的 webpack 配置

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src/pages/Content'),
  use: [
    'raw-loader',
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [tailwindcss, autoprefixer],
        },
      },
    },
  ],
}

直到昨天它都工作正常，我没有对配置进行任何更改。这是在我对项目进行

npm build

之后随机发生的，现在每次我启动项目时，我都会得到相同的结果。以前也发生过这种情况，但我想我已经解决了。

我尝试过但不起作用

• 改变了加载器的顺序
• 删除了所有加载器，仅使用原始加载器（这会导入 CSS，但 tailwind @import 指令将被忽略，并且 tailwind 不会捆绑在最终文件中。）
• 如果我删除 style-loader 并保留 css-loader 和 postcss-loader，我也会在导入的字符串中得到 js。

请注意 - 我使用上述配置有两条规则。第一条规则适用于特定文件夹，另一条规则适用于其余文件/文件夹。在第二条规则中，我特意排除了

path.resolve(__dirname, 'src/pages/Content')

，这样它就不会与第一条规则冲突。

如有任何帮助，我们将不胜感激，谢谢！

Answer 1

我设法通过一点点修补解决了这个问题。

我删除了样式加载器和 CSS 加载器规则。看起来它是将CSS中的@import解释为JS并将JS注入到最终的字符串中。现在它就像一个魅力。

因此，对于将来寻找此问题答案的任何人，只需保留“raw-loader”和“postcss-loader”加载器（用于顺风）