0
249
ViewsReemplace todas las rutas de imagen en un archivo css con cadenas codificadas en base64 - resumen
Estoy tratando de reemplazar todas las rutas de imagen en una URL de fondo css a una cadena codificada en base64 mientras hago una compilación acumulada.
Estoy usando rollup-plugin-postcss para esto, puedo generar un archivo .css separado en la compilación, pero quiero que las rutas de la imagen se reemplacen con URL de datos codificados en base64.
Algo como esto:
background: url('images/sample.png');a
background: url('data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=');Esto es lo que he estado haciendo:
import postcss from 'rollup-plugin-postcss' ... plugins: [ postcss({ extensions: ['.css'], extract: path.resolve('dist/index.css'), }), ]3 answers
Answer question0
Una posible solución sería usar postcss-url :
import postcssurl from 'postcss-url'; postcss({ ..., // postcss options plugins: [ postcssurl({ url: 'inline', }), ], }),0
No estoy seguro de si es posible con rollup-plugin-postcss, intente usar "image-to-base64" npm es muy simple, comando de descarga:
npm i -S imagen a base64
Ejemplo :
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 } )aqui hay mas ejemplos
Si necesitas más ayuda puedes responder a este comentario.
0
Puedes usar postcss-inline-base64
Aquí hay un ejemplo de trabajo basado en este iniciador acumulativo :
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 })] }), ... ] };Luego creé un archivo css en la carpeta src:
body { background: url('b64---./images/test.png---'); }En index.js:
import "./styles.css";En index.html
.... <title>rollup-starter-app</title> <link href="styles.css" rel="stylesheet" /> ....pude conseguir:
