How to set the specific prefix for file-loader in webpack?


Tags: javascript,css,webpack

Problem :

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)?



Solution :

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.


    CSS Howto..

    how do i suppose to make the 4 box be responsive?

    How to stop jquery loop function by a click while starting another loop function

    How to set a css style to the last item of CListView?

    How to set footer responsive?

    How can I find the CSS3 rotation of an element?

    How to make CSS columns in a div?

    How to use center-block and vertical align together using Bootstrap?

    How to style one react component inside another?

    How can I get the current state of my div animation?

    How to change a div top margin without leaving a white space?

    How to Position an Image underneath a form in CSS

    How to create a progress bar animation

    How can I center these varied number of elements within a div?

    CSS: How to position an to the middle of the parent element [closed]

    how to position a div for all screen resolutions

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    How to set my span text vertical align and next to my image?

    How to create item detail view with css

    How to set border's thickness in percentages?

    how to set a specific pixel or character width limit for a text in css

    How To Center Align Menu Through CSS?

    How to make a transition effect that just perform like css transition?

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to position div inside middle of navbar?

    How to make CSS float left not bend around when browser width is shrunk

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?

    How do I know when is the right moment to stop using a specific css vendor-prefix?

    How do I set a different background to current tab?

    How to set opacity for background images using css?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?