Electron Forge导入.pcss文件遇DataUrl生成失败错误如何解决？

错误信息 #

Electron Forge was terminated:
CodeGenerationError: DataUrl can't be generated automatically, because there is no mimetype for ".pcss" in mimetype database. Either pass a mimetype via "generator.mimetype" or use type: "asset/resource" to create a resource file instead of a DataUrl

场景复现 #

导入.pcss的React组件代码：

import React from 'react';
import './style.pcss';

type ContainerProps = {
  children: any;
}

export const Container: React.FC<ContainerProps> = ({ children }) => <div className="app-container">{children}</div>;

对应的style.pcss内容：

.app-container {
    @apply flex w-full h-full min-h-screen bg-gray-800 divide-x divide-gray-900 divide-opacity-50;
}

项目配置文件 #

webpack.renderer.config.js #

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.pcss'],
    fallback: {
      fs: false,
      'stream': require.resolve('stream-browserify'),
      'buffer': require.resolve('buffer'),
      'util': require.resolve('util'),
      'assert': require.resolve('assert'),
      'http': require.resolve('stream-http'),
      'url': require.resolve('url'),
      'https': require.resolve('https-browserify'),
      'os': require.resolve('os-browserify'),
      'path': require.resolve('path-browserify')
    },
  },
};

webpack.rules.js #

module.exports = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.ts$/,
    //include: /src/,
    use: [{ loader: 'ts-loader' }]
  },
  {
    test: /\.tsx?$/,
    //include: /src/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
  { // https://babeljs.io/setup#installation
    test: /\.jsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  },
  {
    test: /\.pcss$/,
    type: 'asset',
    use: {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        //plugins: [
          //"postcss-preset-env",
        //],
      },
    },
  },
  {
    test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
    use: 'url-loader',
  },

  {
    test: /\.css$/i,
    type: 'asset', 
    use: ["style-loader", "css-loader"],
    generator: {
      outputPath: '.webpack/assets/css/'
    },
  }
];

postcss.config.js #

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

tailwind.config.js #

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    content: [
      './src/**/*.{js,ts}'
    ],
    theme: {
        extend: {},
        typography: {
            default: {
                css: {
                    code: {
                        color: 'none',
                        backgroundColor: 'none',
                    },
                    pre: {
                        color: 'none',
                        backgroundColor: 'none',
                        paddingTop: 'auto',
                        paddingLeft: 'auto',
                        paddingBottom: 'auto',
                        paddingRight: 'auto',
                    },
                    'pre code': {
                        padding: 'auto',
                        backgroundColor: 'auto',
                        borderWidth: 'auto',
                        borderRadius: 'auto',
                        color: 'auto',
                        lineHeight: 'auto',
                    },
                },
            },
        },
    },
    variants: {},
    // eslint-disable-next-line global-require
    plugins: [require('@tailwindcss/typography')],
};

tsconfig.json #

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",
  "compilerOptions": {
    "allowJs": true,
    "lib": ["es2021", "dom"],
    "module": "commonjs",
    "target": "es2021",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "jsx": "react",
    "noImplicitAny": false,
    "sourceMap": true,
    "baseUrl": "./src",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "@app/*": ["app/*"],
      "*": ["node_modules/*"]
    }
  },
  "include": ["./src/**/*"]
}

依赖版本 #

"@electron-forge/plugin-webpack": "6.0.0-beta.63",
"@types/webpack-env": "^1.17.0",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"postcss": "^8.4.14",
"postcss-loader": "^7.0.0",
"style-loader": "^3.3.1",
node: v16.15.1
O.S. : Ubuntu 20.04 Desktop
"tailwindcss": "^3.1.2",
"typescript": "~4.5.4"

解决方案 #

核心修改：调整Webpack对.pcss文件的处理规则 #

错误根源是将.pcss文件设置为type: 'asset'，Webpack会将其视为资源文件尝试生成Data URL，但.pcss没有对应的MIME类型，导致报错。正确的做法是通过PostCSS编译.pcss为普通CSS，再注入到页面中。

修改webpack.rules.js中的.pcss规则，替换为以下内容：

{
  test: /\.pcss$/,
  use: [
    'style-loader', // 将编译后的CSS注入到页面
    'css-loader', // 解析CSS中的import和url()
    {
      loader: 'postcss-loader', // 用PostCSS编译pcss
      options: {
        sourceMap: true,
      },
    },
  ],
}

额外优化：清理重复的CSS规则 #

webpack.renderer.config.js和webpack.rules.js中都有.css的处理规则，存在重复。建议删除webpack.renderer.config.js中添加的CSS规则，保留webpack.rules.js中的规则并调整为和pcss一致的处理方式（去掉type: 'asset'）：

{
  test: /\.css$/i,
  use: ["style-loader", "css-loader"],
}

验证修改 #

重新启动Electron Forge项目，此时.pcss文件会被正确编译为CSS并注入到页面，错误消失。

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