Support absolute URLs for image resources. about material-design-lite

[passy]

I remember having a image_url helper back in the compass days. Is there something similar we could do in vanilla sass?

[sindresorhus]

https://github.com/postcss/postcss-url

[yantakus]

I would like to say, than not everyone is using gulp. I'm using webpack with url loader and I have to manually rewrite all the urls to url(mdl/images/tick-mask.svg) for it to work properly. So maybe we can use a variable here to concatenate with image name. For example:

$img-path: mdl/images/; // _variables.scss


mask: url(#{$img-path}tick-mask.svg); //_checkbox.scss

Or even create a mixin like this:

mask: @include img-url(tick-mask.svg);

[RanzQ]

I'm using webpack too and having problems with this... The latest version has ?embed suffix (for gulp-css-inline-images) but I don't know how to setup a webpack loader to discard the suffix and look for the svg file.

I haven't used gulp and don't know if there's a better option but a size based inlining tool would be better imo.

Maybe this? https://github.com/zckrs/gulp-css-base64

[yantakus]

@RanzQ I removed ?embed suffix and use url-loader for embedding SVGs:

    loaders: [
      {
        test: /\.svg$/,
        loader: 'url-loader?limit=100000',
      },
    ],

[RanzQ]

@web2style yeah that's what I ended up doing too but for easier updates I like keeping the source in node_modules/ and only define custom variables and decide which components to import. Now I have to check on every update that my modified files are in sync. :)

Another option would be to fork this repo and install it.