search

BleemIs42 / parcel-plugin-css-url-loader

A plugin for parcel to convert css/less/scss images url into base64.
6 stars 0 forks source link

Doesn't work with @import in less files #4

Closed TomS- closed 5 years ago

TomS- commented 5 years ago

I'm using UIKit and I need a url loader that will bring in the SVG the node_module refers to. Unfortunately this doesn't work with import.

BleemIs42 commented 5 years ago

Can you give me a mini reproduced project? I have tested and no problem found. BTW, you should use url() not data-url() in less.

TomS- commented 5 years ago

Hi @BarryYan

Sorry for the very sparse bug report, I was in a little bit of a rush. So UIKit is a popular Framework (https://getuikit.com) so while it's possible for me to do my own folk and modify the code, it works with other compilers as it is. It's using raw-loader for webpack, I can not currently find an alternative for Parcel. So I believe I'm looking in the wrong direction here. Here is the Less mixin which takes the string generated by raw-loader (https://github.com/uikit/uikit/blob/develop/src/less/components/mixin.less)

BleemIs42 commented 5 years ago

In the mixin.less, the svg-fill function use less data-uri to load src, so parcel will recognize your url has being transform into base64 and ignore it. you should use url replace data-uri. Your .svg-fill function is:

.icon{
    background-image: data-uri("path/to/svg")
}

after compile to css is:

.icon{
    background-image: url("data:image/svg+xml;base64,svgString")
}

but parcel needs: 

.icon{
    background-image: url("path/to/svg")
}
TomS- commented 5 years ago

Hi @BarryYan,

Unfortunately I'm not the maintainer of UIKit so it's not my place to change. However, it's working for everyone else not using Parcel (Gulp, Webpack), so it's a Parcel issue. https://github.com/parcel-bundler/parcel/issues/3255