Rollup-plugin-vue: How to resolve url assets in style parts?

[ale-grosselle]

I'm trying to use in a Vue component, in css part, a postcss plugin to handle static assets.
in particular I'm using "postcss-assets".

Using rollup-plugin-vue 4.1.0 I get this error:
Error: Use process(css).then(cb) to work with async plugins

package.json config:

// Export ES config
const POST_CSS_PLUGINS = [
    postcssAssets({
        basePath: BASE_PATH,
        baseUrl: BASE_URL,
        loadPaths: [BASE_PATH]
    })
];
const ES_OUTPUT = {
    input: "src/index.js",
    external: Object.keys(pkg.dependencies),
    output: [
        { banner, file: pkg.main, format: "cjs" },
        { banner, file: pkg.module, format: "es" }
    ],
    plugins: [
        replace({
            "process.env.NODE_ENV": JSON.stringify(BUILD_FOR_PRODUCTION ? "production" : "development")
        }),
        includePaths({
            paths: ["src"]
        }),
        json({
            exclude: "node_modules"
        }),
        eslint(),
        vue({css: true, style: {postcssPlugins: POST_CSS_PLUGINS}}),
        postcss({plugins: POST_CSS_PLUGINS}),
        babel({ include: "src/**" }), // see .babelrc
        BUILD_FOR_PRODUCTION && filesize() // show bundle size in console output
    ]
};

CSS EXAMPLE:

<style scoped lang="scss">
    .test{
        width: 100px;
        height: 100px;
        display: inline-block;
        background: resolve("images/thron-image.png") no-repeat;
    }
</style>

Question:
can you tell me a method to use the assets on the css part that will work for both version 3 and version 4?

[znck]

This is disabled by default.
But you can do vue({ template: { transformAssetUrls: true } )

Related: https://github.com/vuejs/component-compiler-utils#compiletemplatetemplatecompileoptions-templatecompileresults

If it makes sense to enable this by default we can do it for this project. 😝 PR is welcome.

[znck]

I'll try postcss-assets and come back to you.

Sorry! I missed the concern at first.

[znck]

@vue/component-compiler-utils does not support async style processing yet. This will be resolved as soon as it supports async style processing.

[nandin-borjigin]

Hi, @znck.
As mentioned in https://github.com/vuejs/vue-component-compiler/issues/76, @vue/comopnent-compiler-utils seems to have solved the problem and the ball is on our side now.

I found that master branch already released an alpha version (deab4600d74f2c4e7981bb4698575d38193696bf) regarding async style processing as I was digging the source code to send a PR.

I have already installed the alpha version and it seems working ~