用于后处理 CSS 文件的 Webpack 插件答案

【问题标题】：Webpack plugin for post processing a CSS file用于后处理 CSS 文件的 Webpack 插件
【发布时间】：2021-10-08 18:07:25
【问题描述】：

我将webfonts-loader 与 webpack 一起使用。它从 .svg 文件创建 webfonts，但它也为每个图标创建 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>

没有可用于关闭课程的选项。摆脱它们的一种方法是用正则表达式替换它们：

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

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

【问题讨论】：

标签： css webpack plugins

【解决方案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: { }
      }
    ]
  },

【讨论】：