Can not transform image to base64 with url-loader

[Luobata]

Expected behavior

I write a header.vue file and add some background:url() in the styles, and add url-loader in the rollup.config.js.
But I find the url() won't be transformed to base64.

Actual behavior

background:url(./img/xxx.png) transform: background:url(data:xxxxxx....).

Steps to reproduce the behavior

here is my rollup.config.js

import rollup from 'rollup';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import alias from 'rollup-plugin-alias';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import path from 'path';
import css from 'rollup-plugin-css-only';
import vue from 'rollup-plugin-vue';
import image from 'rollup-plugin-img';
import url from 'rollup-plugin-url';

const root = path.resolve(__dirname, './');

module.exports = {
    input: 'src/index2.js',
    name: 'ecologyHeader',
    sourcemap: true,
    output: {
        file: 'dist/bundle.js',
        format: 'umd'
    },
    plugins: [
        // uglify(),
        resolve(),
        commonjs(),
        vue({
            css: true
            //css: 'dist/header.css'
        }),
        css(),
        url(),
        babel({
            exclude: 'node_modules/**',
            presets: [
                [ 'es2015', { "modules": false } ]
            ],
        }),
        alias({
            UI: path.resolve(__dirname, '../src/ui'),
            EVENT: path.resolve(__dirname, '../src/event')
        })
    ]
};

And I had debugger in the url-loader and find it doesn't require any img file in the process. So I check the vue-loader source code and guess the loader translate the style and doesn't require the img.

[znck]

I'm bit confused here. When you say url-loader, you mean rollup-plugin-url and vue-loader is rollup-plugin-vue.

Here you are trying to use css() and url(), you may need to tell rollup-plugin-vue to convert style to import statements. See docs.

[Luobata]

Sorry I don't explain exactly.

I just want to use roolup-plugin-url to transform background:url() to base64.

Do I have to add the vue({autoStyles: false, styleToImports: true }) to use the roolup-plugin-url?

[znck]

There is known bug in styleToImports feature. Resolved by #129. I think this might be affected by it.

[Luobata]

I update the rollup-plugin-vue to 2.4.2 and find it throw a exception when I add the styleToImports and it doesn't work for the backgroun:url

[znck]

Please share a repro. I need to look into the problem.