Angular css 中的内联资源作为数据 URI

Question

在 Angular 应用程序中是否有任何方法可以在不弹出 webpack 配置的情况下拥有内联资源，如 CSS 后台属性中的 SVG？

我已经尝试自定义 webpack 构建器来删除内置文件加载器规则并添加 uri-loader，但是，SVG 没有内联。

我怀疑它可能与使用 postcss 的内部 SCSS/CSS 处理有某种关系。

Answer 1

如您所说，url-loader 不处理样式文件中的 url。为此，您需要使用 postcss-url package.

要在不弹出的情况下使用自定义 webpack 配置，您需要安装 this package。使用该包中提供的说明配置您的工作区后，您可以使用以下 webpack 配置：

const url = require('postcss-url');    
const urlPlugin = url([{ filter: '**/*.svg', url: 'inline' }]);
    
module.exports = config => {
  for (const rule of config.module.rules) {
      const loader = rule.use && rule.use.find(x => x.loader === 'postcss-loader');
      if (loader) {
          loader.options.plugins = [urlPlugin];
      }
  }
    
  return config;
};

基本上，此代码将 postcss-url 插件添加到 Angular 的默认 webpack 配置中的每个 postcss-loader。

您可以编辑此配置以根据您的需要进行自定义。例如，您可以使用 maxSize 参数来排除大于特定大小的文件。阅读 postcss-url repo 了解所有选项。

Zygimantas 编辑：

我接受你的回答是正确的并添加 webpack.config.ts

的 Typescript 版本

import { Configuration, NewLoader } from 'webpack'
import * as PostCssUrlPlugin from 'postcss-url'

export default (config: Configuration) => {
    if (config.module === undefined) {
        throw new Error()
    }

    let patched = false
    for (const rule of config.module.rules) {
        if ('use' in rule && Array.isArray(rule.use)) {
            const loader = rule.use.find(
                (a): a is NewLoader =>
                    typeof a !== 'string' &&
                    'options' in a &&
                    a.loader !== undefined &&
                    a.loader.includes('postcss-loader'),
            )

            if (loader !== undefined && loader.options !== undefined) {
                loader.options.plugins = [PostCssUrlPlugin([{
                  filter: '**/*.svg',
                  url: 'inline',
                }])]

                patched = true
            }
        }
    }

    if (!patched) {
        throw new Error('Could not patch webpack configuration')
    }

    return config
}

注意：

在 Javascript 版本中，我不得不使用 x.loader.includes('postcss-loader') 而不是 x.loader === 'postcss-loader' 因为 loader 值是我的完整路径。

Angular css 中的内联资源作为数据 URI

Angular inline resources in css as data-uri

webpack

angular-cli

angular

webpack-4

angular-builder