Webpack 5中如何将CSS文件加载为JavaScript变量？

• PostCSS Loader 报错原因：使用的postcss-loader@5.x版本要求所有PostCSS相关配置（包括plugins）必须放在postcssOptions字段下，原配置直接把plugins放在顶层options，不符合校验规则，触发schema错误。
• 输出非纯CSS文本原因：同时给CSS规则配置了css-loader和type: 'asset/source'。css-loader会将CSS转换为可导出字符串的JS模块代码，而type: 'asset/source'会把这段JS代码整体作为字符串导出，因此拿到的是带运行时逻辑的JS代码，而非纯CSS文本。

1. 移除不需要的css-loader，纯CSS文本导出场景无需该 loader。
2. 调整postcss-loader配置结构，将plugins移入postcssOptions字段，解决校验报错。
3. 新增postcss-url插件处理CSS中url()资源的内联转换，无css-loader时webpack不会自动解析CSS内的资源引用，需要该PostCSS插件完成data URI转换。
4. 保留type: 'asset/source'用于将处理完成的纯CSS文本作为默认导出，供JS导入使用。

package.json #

{
  "scripts": {
    "build": "webpack --config webpack.config.mjs"
  },
  "devDependencies": {
    "autoprefixer": "~10.2.5",
    "postcss-loader": "~5.2.0",
    "postcss-url": "~10.1.3",
    "webpack": "~5.36.2",
    "webpack-cli": "~4.6.0"
  }
}

注：已移除不需要的css-loader，新增postcss-url依赖。

webpack.config.mjs #

import path from 'path'
import url from 'url';
import autoprefixer from 'autoprefixer'
import postcssUrl from 'postcss-url'

const __dirname = path.dirname(url.fileURLToPath(import.meta.url))

export default {
  mode: 'production',
  context: path.resolve(__dirname),
  entry: path.resolve(__dirname, 'script.mjs'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: `[name].js`,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        type: 'asset/source',
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer,
                  [postcssUrl, { url: 'inline' }]
                ]
              }
            },
          },
        ],
      },
    ],
  },
}

注：原SVG等静态资源的asset/inline规则可移除，已由postcss-url处理CSS内的资源引用，无其他位置直接引用静态资源的话该规则不再需要。

执行npm run build后，script.mjs中导入的css变量将为经过Autoprefixer补全前缀、SVG资源已转为内联data URI的纯CSS文本，符合预期要求。

内容的提问来源于stack exchange，提问作者Mihail H.