Как заменить url (...) в свернутом CSS на URI данных?

Используя накопительный пакет и плагин postcss, я могу добавить CSS в свой пакет. Однако мой CSS ссылается на некоторые файлы изображений, например. background-image: url(./images/my-image.svg);.

Как я могу настроить postcss / rollup для замены экземпляров CSS url(...) на URI данных и тем самым встроить SVG в пакет?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
9
0
2 038
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого вы можете использовать плагин postcss-url.

Установите плагин postcss-url в свой проект и добавьте его в массив плагинов postcss в конфигурации накопительного пакета.


const url = require('postcss-url');
const postcss = require("rollup-plugin-postcss");

export default {
  plugins: [
    postcss({
      plugins: [
        url({
          url: "inline", // enable inline assets using base64 encoding
          maxSize: 10, // maximum file size to inline (in kilobytes)
          fallback: "copy", // fallback method to use if max size is exceeded
        }),
      ],
    }),
  ],
};


Вы можете настроить резервный механизм в соответствии со своими потребностями.

Вы имели ввиду const url = require("postcss-url");?

avi software 08.09.2020 20:39

@ avi-software Да. Я исправил ответ сейчас. Спасибо, что указали на это.

Sasivarnan 09.09.2020 06:42

Другие вопросы по теме