-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Open
Description
Describe the bug
How should I set up my webpack configuration to help me display styles correctly? Currently, my configuration is causing the styles for Ant Design and all other third-party styles to not display properly.
To Reproduce
config
Expected behavior
normal
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
- OS: [e.g. iOS]
Add any other context about the problem here.
angular.webpack.js
//Polyfill Node.js core modules in Webpack. This module is only needed for webpack 5+.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
/**
* Custom angular webpack configuration
*/
module.exports = (config, options) => {
config.target = 'electron-renderer';
if (options.fileReplacements) {
for (let fileReplacement of options.fileReplacements) {
if (fileReplacement.replace !== 'src/environments/environment.ts') {
continue;
}
let fileReplacementParts = fileReplacement['with'].split('.');
if (fileReplacementParts.length > 1 && ['web'].indexOf(fileReplacementParts[1]) >= 0) {
config.target = 'web';
}
break;
}
}
config.module = {
...config.module,
rules: [
...config.module.rules,
// 处理 node_modules 中的 SCSS 文件
{
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.scss$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
// 处理所有的 CSS 文件
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'fonts/',
},
},
},
],
};
config.plugins = [
...config.plugins,
new NodePolyfillPlugin({
excludeAliases: ["console"]
}),
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript'],
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
ignoreOrder: true
}),
];
config.output.globalObject = 'globalThis';
return config;
}
Metadata
Metadata
Assignees
Labels
No labels