rollup构建时如何用rollup-plugin-postcss将css内图片路径替换为base64

步骤1：安装依赖 #

首先安装postcss-url插件，用于处理css中的资源路径：

npm install postcss-url --save-dev

步骤2：修改rollup配置 #

调整原有postcss插件配置，添加postcss-url插件并开启base64内联规则：

import postcss from 'rollup-plugin-postcss'
import postcssUrl from 'postcss-url'

...

plugins: [
    postcss({
        extensions: ['.css'],
        extract: path.resolve('dist/index.css'),
        // 新增postcss插件配置
        plugins: [
            postcssUrl({
                url: 'inline', // 开启内联模式，将资源转为base64
                maxSize: 1024 * 1024 * 10, // 内联文件大小上限，单位字节，这里设为10MB，可根据需求调整，大于该值的资源不会转base64，要全转的话设为比最大的图片更大的值即可
                // 可选：如果你的图片路径是相对项目根目录的，可以加basePath参数指定查找位置
                // basePath: path.resolve(__dirname, 'src')
            })
        ]
    }),
]

效果验证 #

构建后即可看到原css中background: url('images/sample.png')会自动转为background: url('data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=')的格式。

注意事项 #

• 图片转base64后会比原文件体积大1/3左右，会增加最终css文件的体积，可根据业务场景调整maxSize阈值，只把小图标转为base64
• 如果图片路径解析异常，可调整postcssUrl的basePath参数，指定图片的根查找目录

内容的提问来源于stack exchange，提问作者Hitesh Misro