Webpack插件，用于后期处理CSS文件

Question

我正在使用webpack的webfonts-loader。它创建webfonts . svg文件,但它也为每个图标创建CSS类:

.icon:before {
font-family: icons !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
}
.icon-add-to-list:before {
content: "f101";
}
.icon-add-user:before {
content: "f102";
}
.icon-address:before {
content: "f103";
}
/* ... (200+ CSS-classes) */

如果字体包含连体，则不需要图标类。然后可以使用以下代码:

i.icon {
font-family: icons;
font-style: normal;
font-weight: normal;
}
<i class="icon">add-to-list</i>

没有选项可用于关闭类。一种摆脱它们的方法是将它们替换为regexp:

const regexp = /.[a-z-]+:befores{[^}]+}s*/mg;
const newCss = oldCSS.replace(regexp, '');

但我需要一个webpack插件，可以做替换。要么使用现有的一个，要么自己编写一个，重写由webfonts-loader生成的css代码。

Answer 1

与regexp-replace-loader一起工作:

{
test: /.font.js$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'regexp-replace-loader',
options: {
match: {
pattern: '\.[a-z0-9\-]+:before\s+\{[^\}]+\}\s*',
flags: 'mg'
},
replaceWith: ''
}
},
{
loader: 'webfonts-loader',
options: { }
}
]
},