无法自动生成 DataUrl，因为 mimetype 数据库中没有用于".pcss"的 mimetype

Question

导入.pcss文件时:

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;
}

我得到这个错误信息:

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

这是webpack configuration:

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"

如何解决这个问题?

Answer 1

这个修改似乎解决了webpack.rules.js:

{
test: /.pcss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],