javascript - 用 base64 编码字符串替换 css 文件中的所有图像路径 - 汇总

Question

我正在尝试在进行汇总构建时将 css 背景 url 中的所有图像路径替换为 base64 编码的字符串。

我正在为此使用 rollup-plugin-postcss，我可以在构建中生成一个单独的 .css 文件，但我希望图像路径是替换为 base64 编码的数据 URL。

像这样:

background: url('images/sample.png');

到

background: url('data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=');

这是我一直在做的:

import postcss from 'rollup-plugin-postcss'

...

plugins: [
    postcss({
        extensions: ['.css'],
        extract: path.resolve('dist/index.css'),
    }),
]

Answer 1

一个可能的解决方案是使用 postcss-url :

import postcssurl from 'postcss-url';

postcss({
 ..., // postcss options
 plugins: [
   postcssurl({
     url: 'inline',
   }),
 ],
}),