search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Relative urls not working #19

Closed jimitndiaye closed 8 years ago

jimitndiaye commented 8 years ago

I have the following set up:

      {
          test: /\.(woff|woff2|eot|ttf|svg|ico)$/,
          loader: 'url-loader?limit=100000&name=fonts/[name].[ext]'
          // loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\app.(ios|md|wp).scss$/,
        exclude: helpers.root('src', 'app'),
        loader: 'file?name=css/[name].css!extract!css-loader!postcss!resolve-url!sass?sourceMap'
      },

As you can see, fonts are being redirected to a fonts folder and css files are redirected to a css folder. The generated CSS in the css folder has url references to fonts/somefont.tff instead of ../fonts/somefont.tff

How can I fix this so that they point to the right paths?

bholloway commented 8 years ago

I myself have not had any luck structuring the output in webpack (and achieving fully relative references).

Since I was adding a hash to the filenames (for eventual CDN) I ended up putting everything in a flat directory.

However your paths should be correct if they were root relative.

Use the output.publicPath option to prepend a slash, or the full public URL.

That said there may be some option I didn't find to allow your fully relative structure.

bholloway commented 8 years ago

@jimitndiaye what is your status? can i close this issue?

jimitndiaye commented 8 years ago

This never worked for me. I ended up having to embed the fonts to avoid the issue

bholloway commented 8 years ago

Ok. As far as I can see this is a problem for the CSS loader chain, not resolve-url-loader specifically. The resolve-url-loader simply identifies the asset for webpack.

That said it is a shame we could not fix the problem.