I have sass file with font:

$icons-font-path: "~material-design-icons/iconfont/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(#{$icons-font-path}/MaterialIcons-Regular.woff2) format('woff2');
}

And file-loader that downloads the font to a specific directory (/home/user/project/example/src/static/fonts/):

  {
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'file',
    query: {
      name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]')
    }
  },

It's work fine for me, but out css has same path in url, like:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(/home/user/project/example/src/static/fonts/MaterialIcons-Regular.woff2) format('woff2');
}

How do I copy woff2 to a specific directory and set specific prefix for url(prefix/MaterialIcons-Regular.woff2)?

I have sass file with font:

$icons-font-path: "~material-design-icons/iconfont/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(#{$icons-font-path}/MaterialIcons-Regular.woff2) format('woff2');
}

And file-loader that downloads the font to a specific directory (/home/user/project/example/src/static/fonts/):

  {
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'file',
    query: {
      name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]')
    }
  },

It's work fine for me, but out css has same path in url, like:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(/home/user/project/example/src/static/fonts/MaterialIcons-Regular.woff2) format('woff2');
}

How do I copy woff2 to a specific directory and set specific prefix for url(prefix/MaterialIcons-Regular.woff2)?

• javascript
• css
• webpack

2 Answers 2

The resolve-url-loader will allow you to specify your font url() relative to your .sass file. The .css should have a path url that Webpack can resolve to a module.

The key thing is for Webpack to locate all of your assets that you specified in url() statements. At that point resolve-url-loader is job done. The absolute option should never be needed, as you should always setup Webpack to find all your "modules", including assets.

By default (and I am not an expert on Webpack) all the css and assets are coppied to the output and the correct relative paths are rewritten to the css url() statements.

I am thinking that the crux of your problem is similar to a CDN deployment, where you want some absolute prefix. If this is the case then look to the public path property. I have not used it myself but it appears to be relevant.

You're probably gonna want to use some bination of the sass-loader and the resolve-url-loader.

Your webpack loader config will look something like this:

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.scss$/,
        loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
      }
    ]
  },
  resolveUrlLoader: {
      absolute: '/prefix'
  }
};