Electron-React-Boilerplate打包后style.css为空，应用无样式求助

核心问题 #

生产环境Webpack配置存在两处关键错误，导致样式无法被正确提取到style.css：

1. 重复的CSS处理规则：针对非模块化的.css/.scss文件，定义了两条匹配条件完全相同的规则，后一条规则会覆盖前一条，导致PostCSS（及Tailwind）的处理逻辑失效，甚至引发整体样式处理异常。
2. Loader执行顺序错误：PostCSS Loader的位置在Sass Loader之后，违反了Webpack Loader从右到左的执行顺序，导致PostCSS无法正确处理Sass编译后的CSS代码。

修复步骤 #

1. 修正生产环境Webpack配置（config.renderer.prod.ts） #

找到module.rules中的CSS处理规则，删除重复的第三条规则，并调整Loader顺序：

原错误代码段：

{
  test: /\.s?(a|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
    {
      loader: 'postcss-loader',
      options: {
      postcssOptions: {
        plugins:
          [
            require('tailwindcss'),
            require('autoprefixer'),
          ]
        },
      },
    },
  ],
  exclude: /\.module\.s?(c|a)ss$/,
},
{
  test: /\.s?(a|c)ss$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  exclude: /\.module\.s?(c|a)ss$/,
},

替换为：

{
  test: /\.s?(a|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
    },
    'sass-loader',
  ],
  exclude: /\.module\.s?(c|a)ss$/,
},

说明：

• 删除重复规则，避免规则冲突
• 调整Loader顺序为MiniCssExtractPlugin.loader → css-loader → postcss-loader → sass-loader，符合Webpack从右到左的执行逻辑：先通过sass-loader编译SCSS为CSS，再用postcss-loader处理Tailwind等插件，接着用css-loader解析CSS，最后提取为单独的CSS文件。

2. 同步修正开发环境Webpack配置（config.renderer.dev.ts） #

虽然开发环境样式显示正常，但Loader顺序同样存在错误，建议同步修正避免后续问题：

原错误代码段：

{
  test: /\.s?css$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
    {
      loader: 'postcss-loader',
      options: {
      postcssOptions: {
        plugins:
          [
            require('tailwindcss'),
            require('autoprefixer'),
          ]
        },
      },
    },
  ],
  exclude: /\.module\.s?(c|a)ss$/,
},

替换为：

{
  test: /\.s?css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
    },
    'sass-loader',
  ],
  exclude: /\.module\.s?(c|a)ss$/,
},

3. 清理缓存并重新打包 #

执行以下命令清理缓存后重新构建：

rm -rf node_modules/.cache
npm run clean
npm run package

验证修复 #

打包完成后，检查release/app/dist/renderer/style.css文件，应能看到包含Tailwind工具类及自定义样式的内容，运行打包后的Electron应用，样式即可正常显示。

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