如何将“url-loader”与 angular-cli 编译器一起使用

Question

通常我运行我的项目并使用 WebPack 构建我的 SASS 文件，我的规则是生成 CSS 文件，并使用

url-loader

将该 sass 文件内的所有

url(...)

转换为 dataURI。

所以

background: url('my-file.svg')

将转换为

background url('data:image/svg+xml;base64,SoMeGiBbeRiShHeRe')

我想知道是否有办法通过

ng

编译器来实现这一点？我对此进行了一些研究，方法是使用

ng eject

但该选项不再可用。

Answer 1

最近，当我为 Zoom Video SDK UI Toolkit 构建虚拟背景功能时，我必须这样做。试试这个：

在 Angular 项目的根目录中创建一个名为

extra-webpack.config.js

的文件，其中包含以下内容：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader'
          },
        ],
      },
    ],
  },
}

在您的

angular.json

文件中，在

customWebpackConfig

对象内添加一个

build

对象，这将告诉 Angular 使用 url-loader 将图像转换为 base64

data:image

:

...
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins": true
            },
...

构建项目后

$ ng build

，图像路径将转换为base64数据：图像，并且您的图像引用将使用base64 URI而不是图像的路径。

这是我部署的构建的示例：