jantimon / iconfont-webpack-plugin

Simple icon font handling for webpack
MIT License
112 stars 38 forks source link

How to use this plugin with Nuxt.js #20

Closed strunkie30 closed 6 years ago

strunkie30 commented 6 years ago

How to use this plugin with Nuxt.js? The following configuration does not work.

Nuxt configuration

build: {
    postcss: (loader) => [
        require('iconfont-webpack-plugin')({ resolve: loader.resolve })
    ]
}

SCSS code

p {
    &:before {
        content: "";
        font-icon: url('~/assets/icons/arrow-left.svg');
        transition: 0.5s color;
    }
}

Compiled CSS

p:before {
    content: "";
    font-icon: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Q…Z6Ii8+CiAgICA8cGF0aCBkPSJNMC0uNWgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=);
    -webkit-transition: 0.5s color;
    transition: 0.5s color;
}
jantimon commented 6 years ago

It looks like your css loader is used before the postcss processing.
Can you turn this around?

strunkie30 commented 6 years ago

I can't change this in de Nuxt.js configuration. I'am going to create a new issue on the Nuxt.js repo.