使用 Rollup 打包 Vue 组件，如何打包 style 标签中使用 url() 引入的图片？

Question

现有 rollup.config.js：

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import commonjs from '@rollup/plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import url from '@rollup/plugin-url';
// import postcss from 'rollup-plugin-postcss'

const production = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    name: 'App',
    sourcemap: true
  },
  plugins: [
    vue({
      css: false
    }),
    css({ output: 'bundle.css' }),
    url({
      destDir: `./dist/assets`
    }),
    resolve(),
    commonjs(),
    babel(),
    production && terser()
  ]
};

文件目录结构：

.
├─babel.config.js
├─package.json
├─rollup.config.js
├─yarn.lock
├─src
|  ├─App.vue
|  ├─img.jpg
|  └main.js

App.vue 中的代码

<template>
  <div class="background">
    <h1>{{ message }}</h1>
    <button class="button" @click="handleButtonClick">click me</button>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('');
    const clicked = ref(false);

    const handleButtonClick = () => {
      clicked.value = !clicked.value;
    };

    watch([clicked], () => {
      if (clicked.value) {
        message.value = 'Hello World!';
      } else {
        message.value = 'Hello Vue!';
      }
    });

    return {
      message,
      clicked,
      handleButtonClick
    };
  }
});
</script>

<style>
.button {
  width: 60px;
  height: 30px;
  color: aqua;
  background: orange;
  border-color: transparent;
  outline-color: transparent;
  border-radius: 6px;
}

.background {
  background-image: url('./img.jpg');
}
</style>

在 .vue 文件的 style 标签中使用 url() 引入的图片最终不会被打包到 dist 目录下，但是如果在 js 代码中 import img from './img.jpg 图片就能打包进 dist/assets 目录。

请问有什么方式能够解决在 style 中使用 url() 引入静态资源的打包和路径转换问题？

Answer 1

顶一下，别沉了

Answer 2

我开源了一个插件解决了这个问题
npm 地址 ： https://www.npmjs.com/package/@sixian/css-url
欢迎大家 issues , 喜欢就 star 一下

Answer 3

楼主,找的方法了么

Answer 4

为什么要用rollup，它就不是做这方面事情的
rollup主要针对纯js的模块化打包解决方案
怎么不用webpack

Answer 5

@rollup/plugin-image 了解一下。

给个官方配置参考一下

rullup.config.js

import image from '@rollup/plugin-image';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [image()]
};

按楼上的说，如果编写的组件包有很多图片和css，建议使用webpack更为合适