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',
   }),
 ],
}),

Answer 2

我不确定是否可以使用 rollup-plugin-postcss，尝试使用“image-to-base64”npm，它非常简单，下载命令：

npm i -S image-to-base64

例子 ：

const imageToBase64 = require('image-to-base64');
//or
//import imageToBase64 from 'image-to-base64/browser';

imageToBase64("path/to/file.jpg") // Path to the image
    .then(
        (response) => {
            console.log(response); // "cGF0aC90by9maWxlLmpwZw=="
        }
    )
    .catch(
        (error) => {
            console.log(error); // Logs an error if there was one
        }
    )

这里有更多例子

https://www.npmjs.com/package/image-to-base64

如果您需要更多帮助，可以回复此评论。

Answer 3

您可以使用postcss-inline-base64

这是一个基于此汇总启动器的工作示例：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import path from 'path'

import postcss from 'rollup-plugin-postcss'
import base64Inliner from 'postcss-inline-base64'


// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;
const __dirname = path.resolve();
const baseDir = path.join(__dirname, 'public')


export default {
    input: 'src/main.js',
    output: {
        file: 'public/bundle.js',
        format: 'iife', // immediately-invoked function expression — suitable for <script> tags
        sourcemap: true
    },
    plugins: [
        postcss({
            extensions: ['.css'],
            extract: path.resolve('public/styles.css'),
            plugins: [base64Inliner({ baseDir })]
        }),
        ...
    ]
};

然后我在 src 文件夹中创建了一个 css 文件：

body {
    background: url('b64---./images/test.png---');
}

在 index.js 中：

import "./styles.css";

在 index.html 中

....
<title>rollup-starter-app</title>
<link href="styles.css" rel="stylesheet" />
....

我能够得到：