New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css-loader parse fail on @font-face #38

Closed
mattybow opened this Issue Jan 30, 2015 · 43 comments

Comments

Projects
None yet
@mattybow

mattybow commented Jan 30, 2015

I get this error when webpack tries to run:

ERROR in ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: 
./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader?importLoaders=1!./bower_components/bootstrap/dist/css/bootstrap.css 2:4480-4532 2:4551-4603

Here's my configuration

 module: {
    loaders: [
      // Pass *.jsx files through jsx-loader transform
      { test: /\.js$/, loaders: ['react-hot','jsx?harmony'] },

      { test: /\.css$/, loader: "style-loader!css-loader?importLoaders=1" }
    ]
  }

Is it something in my config that's wrong or missing something?

@mattybow

This comment has been minimized.

Show comment
Hide comment
@mattybow

mattybow Jan 30, 2015

I needed to add url-loader to my config

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

mattybow commented Jan 30, 2015

I needed to add url-loader to my config

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

@mattybow mattybow closed this Jan 30, 2015

@steida steida referenced this issue Mar 13, 2015

Closed

Add url loader. #61

@MayasHaddad

This comment has been minimized.

Show comment
Hide comment
@MayasHaddad

MayasHaddad Jun 6, 2015

@mattybow Thanks for solving it ;)

MayasHaddad commented Jun 6, 2015

@mattybow Thanks for solving it ;)

@dyygtfx

This comment has been minimized.

Show comment
Hide comment
@dyygtfx

dyygtfx commented Sep 26, 2015

thx

@TonyWang031

This comment has been minimized.

Show comment
Hide comment
@TonyWang031

TonyWang031 Oct 30, 2015

Thanks for the answer @mattybow, it seems better to add a suffix regex to fit more general cases, the following configuration works for me:
{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

TonyWang031 commented Oct 30, 2015

Thanks for the answer @mattybow, it seems better to add a suffix regex to fit more general cases, the following configuration works for me:
{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

@TheWaWaR

This comment has been minimized.

Show comment
Hide comment
@TheWaWaR

TheWaWaR commented Nov 13, 2015

Thanks @mattybow

@polinom

This comment has been minimized.

Show comment
Hide comment
@polinom

polinom commented Jan 12, 2016

👍

@wpcarro

This comment has been minimized.

Show comment
Hide comment
@wpcarro

wpcarro Feb 16, 2016

I am struggling to add new fonts to my styles. My webpack.config test for fonts is:

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

I am unsure of the syntax that I should use to load the font file, and I think that this is the problem. Could anyone share with me a code snippet to illustrate how they have successfully loaded a font? Right now I have the following in my main.scss:

@font-face {
  font-family: testFont;
  src: url("../assets/fonts/Proxima_Nova_Regular.ttf");
  font-weight: bold;
}

But this isn't working for me. Any help would be greatly appreciated!

wpcarro commented Feb 16, 2016

I am struggling to add new fonts to my styles. My webpack.config test for fonts is:

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

I am unsure of the syntax that I should use to load the font file, and I think that this is the problem. Could anyone share with me a code snippet to illustrate how they have successfully loaded a font? Right now I have the following in my main.scss:

@font-face {
  font-family: testFont;
  src: url("../assets/fonts/Proxima_Nova_Regular.ttf");
  font-weight: bold;
}

But this isn't working for me. Any help would be greatly appreciated!

@cusspvz

This comment has been minimized.

Show comment
Hide comment
@cusspvz

cusspvz Feb 26, 2016

@wpcarro which css-loader version are you using ?

cusspvz commented Feb 26, 2016

@wpcarro which css-loader version are you using ?

@wpcarro

This comment has been minimized.

Show comment
Hide comment
@wpcarro

wpcarro Feb 26, 2016

@cusspvz:

From the package.json

"css-loader": "^0.23.1",

We ended up getting the fonts to load using file-loader in lieu of url-loader. To be completely honest, I'm unsure of the nuances between the two loaders. I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

When I was experiencing trouble, Webpack was processing the font files before processing the Sass files. I rearranged this so that the order went:

json --> photos --> Sass --> audio --> fonts --> JS

Either way, the process was a little bit similar to shooting in the dark, but it's working now.

wpcarro commented Feb 26, 2016

@cusspvz:

From the package.json

"css-loader": "^0.23.1",

We ended up getting the fonts to load using file-loader in lieu of url-loader. To be completely honest, I'm unsure of the nuances between the two loaders. I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

When I was experiencing trouble, Webpack was processing the font files before processing the Sass files. I rearranged this so that the order went:

json --> photos --> Sass --> audio --> fonts --> JS

Either way, the process was a little bit similar to shooting in the dark, but it's working now.

@cusspvz

This comment has been minimized.

Show comment
Hide comment
@cusspvz

cusspvz Feb 26, 2016

To be completely honest, I'm unsure of the nuances between the two loaders.

file-loader grabs the file and handle its writing on build (you could specify saved path/name.extension, and other nice features it has).
url-loader tries to load up file data inline by using blob style url loading, but it would do it only if a file size is under the limitspecified, otherwise it will fallback and use file-loader instead.

URL loader is indicated to be used on images and other small resources you could have.

I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

Loaders order definition is important because they pipe the content over them.
Here are some examples so you can understand how it works under the hood:

**JS CONTENT ** < Loader D < Loader C < Loader B < Loader A < **File**

file-loader example

"public/path/to/image.thumbnail.png" (module exported string) < file-loader?name=[name].thumbnail.[ext] (saves file on folder and exports path) < gm-loader (handle resizing, exports thumbnailed file) < Original File (buffer with its content)

cusspvz commented Feb 26, 2016

To be completely honest, I'm unsure of the nuances between the two loaders.

file-loader grabs the file and handle its writing on build (you could specify saved path/name.extension, and other nice features it has).
url-loader tries to load up file data inline by using blob style url loading, but it would do it only if a file size is under the limitspecified, otherwise it will fallback and use file-loader instead.

URL loader is indicated to be used on images and other small resources you could have.

I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

Loaders order definition is important because they pipe the content over them.
Here are some examples so you can understand how it works under the hood:

**JS CONTENT ** < Loader D < Loader C < Loader B < Loader A < **File**

file-loader example

"public/path/to/image.thumbnail.png" (module exported string) < file-loader?name=[name].thumbnail.[ext] (saves file on folder and exports path) < gm-loader (handle resizing, exports thumbnailed file) < Original File (buffer with its content)
@wpcarro

This comment has been minimized.

Show comment
Hide comment
@wpcarro

wpcarro Feb 26, 2016

@cusspvz thanks for the detailed explanation and overview!

wpcarro commented Feb 26, 2016

@cusspvz thanks for the detailed explanation and overview!

@zirho

This comment has been minimized.

Show comment
Hide comment
@zirho

zirho Mar 28, 2016

It'd better be

,
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }

to cover caching specific versions

zirho commented Mar 28, 2016

It'd better be

,
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }

to cover caching specific versions

@mqliutie

This comment has been minimized.

Show comment
Hide comment
@mqliutie

mqliutie May 22, 2016

Hi, I also have some questions when I import "amazeui/less/amazeui.less".

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:99961-100012

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100035-100078

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff2 in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100136-100189

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100220-100272

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.ttf in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100302-100353

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100387-100438

In addition, Please click here about amazeui

But when I import "amazeui/dist/css/amazeui.min.css" questions don't exist.

I think in less file use font so it have these questions.

Can you help me?

Thanks

mqliutie commented May 22, 2016

Hi, I also have some questions when I import "amazeui/less/amazeui.less".

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:99961-100012

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100035-100078

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff2 in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100136-100189

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100220-100272

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.ttf in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100302-100353

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100387-100438

In addition, Please click here about amazeui

But when I import "amazeui/dist/css/amazeui.min.css" questions don't exist.

I think in less file use font so it have these questions.

Can you help me?

Thanks

@mqliutie

This comment has been minimized.

Show comment
Hide comment
@mqliutie

mqliutie May 23, 2016

I reviewed amazeui work tree , there is not fonts folder.

mqliutie commented May 23, 2016

I reviewed amazeui work tree , there is not fonts folder.

@oscaroceguera

This comment has been minimized.

Show comment
Hide comment
@oscaroceguera

oscaroceguera Nov 16, 2016

thanks @TonyWang031

before :

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

it worked! after apply:

{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

oscaroceguera commented Nov 16, 2016

thanks @TonyWang031

before :

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

it worked! after apply:

{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

@psegarel

This comment has been minimized.

Show comment
Hide comment
@psegarel

psegarel Nov 17, 2016

You can find the full solution here
webpack-bootstrap

psegarel commented Nov 17, 2016

You can find the full solution here
webpack-bootstrap

@eden-lane

This comment has been minimized.

Show comment
Hide comment
@eden-lane

eden-lane Dec 10, 2016

None of this works for me

eden-lane commented Dec 10, 2016

None of this works for me

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Jan 3, 2017

what if you are not wanting to bundle fonts at all? I originally had my pcss being parsed by postcss-cli and output to the same dir as webpacks build.

@font-face {
  font-family: "sofachrome";
  src: url(../fonts/sofachrome.regular.ttf) format("truetype");
}

QuantumInformation commented Jan 3, 2017

what if you are not wanting to bundle fonts at all? I originally had my pcss being parsed by postcss-cli and output to the same dir as webpacks build.

@font-face {
  font-family: "sofachrome";
  src: url(../fonts/sofachrome.regular.ttf) format("truetype");
}
@MartianLee

This comment has been minimized.

Show comment
Hide comment
@MartianLee

MartianLee Jan 3, 2017

Lovely solution !! Thank you for your answer.
I wasted so much time but you solve it. I'm so happy now.

MartianLee commented Jan 3, 2017

Lovely solution !! Thank you for your answer.
I wasted so much time but you solve it. I'm so happy now.

@mbeauchamp7

This comment has been minimized.

Show comment
Hide comment
@mbeauchamp7

mbeauchamp7 Jan 11, 2017

None of the solutions worked for me until I changed the paths to absolute
Ex.:

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~/src/sass/fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}

mbeauchamp7 commented Jan 11, 2017

None of the solutions worked for me until I changed the paths to absolute
Ex.:

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~/src/sass/fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}
@cusspvz

This comment has been minimized.

Show comment
Hide comment
@cusspvz

cusspvz Jan 12, 2017

@mbeauchamp7 Have you tried this?

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~./fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}

cusspvz commented Jan 12, 2017

@mbeauchamp7 Have you tried this?

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~./fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}
@mbeauchamp7

This comment has been minimized.

Show comment
Hide comment
@mbeauchamp7

mbeauchamp7 Jan 12, 2017

@cusspvz This worked as well thanks!

mbeauchamp7 commented Jan 12, 2017

@cusspvz This worked as well thanks!

@cusspvz

This comment has been minimized.

Show comment
Hide comment
@cusspvz

cusspvz Jan 12, 2017

@mbeauchamp7 It worked because the ~ acts as a module indicator for css-loader, meaning that it should load the file over webpack instead of css.

cusspvz commented Jan 12, 2017

@mbeauchamp7 It worked because the ~ acts as a module indicator for css-loader, meaning that it should load the file over webpack instead of css.

@mbeauchamp7

This comment has been minimized.

Show comment
Hide comment
@mbeauchamp7

mbeauchamp7 Jan 12, 2017

@cusspvz Ah thanks for the clarification!

mbeauchamp7 commented Jan 12, 2017

@cusspvz Ah thanks for the clarification!

@hrishikeshqb

This comment has been minimized.

Show comment
Hide comment
@hrishikeshqb

hrishikeshqb Jan 17, 2017

@mattybow Hey I am using scss syntax and added an appropriate loader for it also. Here is my config
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app.js',
vendor: ['angular', 'angular-ui-router', 'angular-bootstrap-calendar', 'bootstrap-css-only']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
module:{
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass",
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
]
};
But I am getting the error

node_modules/bootstrap-css-only/css/bootstrap.min.css Unexpected token (5:83)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:83)

while building. Am I in short of any loaders here?

hrishikeshqb commented Jan 17, 2017

@mattybow Hey I am using scss syntax and added an appropriate loader for it also. Here is my config
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app.js',
vendor: ['angular', 'angular-ui-router', 'angular-bootstrap-calendar', 'bootstrap-css-only']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
module:{
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass",
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
]
};
But I am getting the error

node_modules/bootstrap-css-only/css/bootstrap.min.css Unexpected token (5:83)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:83)

while building. Am I in short of any loaders here?

@mattybow

This comment has been minimized.

Show comment
Hide comment
@mattybow

mattybow Jan 17, 2017

@hrishikeshqb your error says that it does not know how to handle a .css file. You'll need to tell it how to handle a file with that extension in another loader entry with a test regex that matches ending in .css

mattybow commented Jan 17, 2017

@hrishikeshqb your error says that it does not know how to handle a .css file. You'll need to tell it how to handle a file with that extension in another loader entry with a test regex that matches ending in .css

@hrishikeshqb

This comment has been minimized.

Show comment
Hide comment
@hrishikeshqb

hrishikeshqb Jan 17, 2017

@mattybow Thanks man! it worked. Earlier I added css as <link rel="stylesheet" type="text/css" href='node_modules/bootstrap-only-css/dist/bootstrap.css'> in my index.html. But from now I guess webpack will take care of it.

hrishikeshqb commented Jan 17, 2017

@mattybow Thanks man! it worked. Earlier I added css as <link rel="stylesheet" type="text/css" href='node_modules/bootstrap-only-css/dist/bootstrap.css'> in my index.html. But from now I guess webpack will take care of it.

@imrealashu

This comment has been minimized.

Show comment
Hide comment
@imrealashu

imrealashu commented Mar 5, 2017

Thanks @mattybow 👍

@kishan3

This comment has been minimized.

Show comment
Hide comment
@kishan3

kishan3 Apr 27, 2017

Just remeber to install file-loader and url-loader before changing your webpack config.
Using :
npm install --save file-loader url-loader

kishan3 commented Apr 27, 2017

Just remeber to install file-loader and url-loader before changing your webpack config.
Using :
npm install --save file-loader url-loader

@brandonreid

This comment has been minimized.

Show comment
Hide comment
@brandonreid

brandonreid Jun 13, 2017

For people from the future, I went with a different solution.
I used raw-loader:

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract([
        'raw-loader',
        'sass-loader',
      ])
    },
  ]
}

Then imported fonts where I wanted them with copy-webpack-plugin:

plugins: [
  new CopyWebpackPlugin([
    {
      // Copy Some Specific Fonts
      from: './node_modules/.../.../fonts',
      to: 'fonts'
    }
  ])
]

This gives me some extra control too so we avoid importing fonts unintentionally from other plugins, etc.

brandonreid commented Jun 13, 2017

For people from the future, I went with a different solution.
I used raw-loader:

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract([
        'raw-loader',
        'sass-loader',
      ])
    },
  ]
}

Then imported fonts where I wanted them with copy-webpack-plugin:

plugins: [
  new CopyWebpackPlugin([
    {
      // Copy Some Specific Fonts
      from: './node_modules/.../.../fonts',
      to: 'fonts'
    }
  ])
]

This gives me some extra control too so we avoid importing fonts unintentionally from other plugins, etc.

@trkrameshkumar

This comment has been minimized.

Show comment
Hide comment
@trkrameshkumar

trkrameshkumar Jun 18, 2017

Thanks! @mattybow , for sharing the solution :)

trkrameshkumar commented Jun 18, 2017

Thanks! @mattybow , for sharing the solution :)

@zyxneo

This comment has been minimized.

Show comment
Hide comment
@zyxneo

zyxneo Jul 7, 2017

This code worked for me with webpack2:

      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }

I'm using https://icomoon.io/app/ , my css looks like:

@font-face {
  font-family: 'icomoon';
  src:
    url('fonts/icomoon.ttf?3jbvu') format('truetype'),
    url('fonts/icomoon.woff?3jbvu') format('woff'),
    url('fonts/icomoon.svg?3jbvu#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Hope it helps.

zyxneo commented Jul 7, 2017

This code worked for me with webpack2:

      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }

I'm using https://icomoon.io/app/ , my css looks like:

@font-face {
  font-family: 'icomoon';
  src:
    url('fonts/icomoon.ttf?3jbvu') format('truetype'),
    url('fonts/icomoon.woff?3jbvu') format('woff'),
    url('fonts/icomoon.svg?3jbvu#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Hope it helps.

@psimyn psimyn referenced this issue Aug 6, 2017

Closed

Can't import css #1603

@taha-k

This comment has been minimized.

Show comment
Hide comment
@taha-k

taha-k Aug 26, 2017

Slight improvement to @TonyWang031 suggestion as it gives invalid regex
{test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000'}

taha-k commented Aug 26, 2017

Slight improvement to @TonyWang031 suggestion as it gives invalid regex
{test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000'}

@rinogo

This comment has been minimized.

Show comment
Hide comment
@rinogo

rinogo Aug 31, 2017

@CodeTaha Good catch! Beyond adding support for more filetypes, it looks like you're escaping a . and a ?. Are there other changes I'm missing?

rinogo commented Aug 31, 2017

@CodeTaha Good catch! Beyond adding support for more filetypes, it looks like you're escaping a . and a ?. Are there other changes I'm missing?

@ahmadalfy

This comment has been minimized.

Show comment
Hide comment
@ahmadalfy

ahmadalfy Sep 4, 2017

The solution proposed by @zyxneo is the best. Other solutions attempts to inline the SVG font into the CSS file which is insane.

ahmadalfy commented Sep 4, 2017

The solution proposed by @zyxneo is the best. Other solutions attempts to inline the SVG font into the CSS file which is insane.

@anzcarroll

This comment has been minimized.

Show comment
Hide comment
@anzcarroll

anzcarroll Nov 13, 2017

@oscaroceguera where did you put this? what location in what file? this is the exact issue I am having.

before :You may need an appropriate loader to handle this file type.SyntaxError: Unexpected character '�' (1:0)it worked!

after apply:{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

anzcarroll commented Nov 13, 2017

@oscaroceguera where did you put this? what location in what file? this is the exact issue I am having.

before :You may need an appropriate loader to handle this file type.SyntaxError: Unexpected character '�' (1:0)it worked!

after apply:{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

@ahmadalfy

This comment has been minimized.

Show comment
Hide comment
@ahmadalfy

ahmadalfy Nov 13, 2017

@anzcarroll When you get that error try stopping webpack and run it again

ahmadalfy commented Nov 13, 2017

@anzcarroll When you get that error try stopping webpack and run it again

@rosethorn999

This comment has been minimized.

Show comment
Hide comment
@rosethorn999

rosethorn999 Nov 16, 2017

I add the rule by zyxneo into webpack.config.js and redo
npm run dev
It's fixed! Thank!

rosethorn999 commented Nov 16, 2017

I add the rule by zyxneo into webpack.config.js and redo
npm run dev
It's fixed! Thank!

@chebotarevmichael

This comment has been minimized.

Show comment
Hide comment
@chebotarevmichael

chebotarevmichael Dec 7, 2017

Кто пояснит, в какой именно файл это вписать? Какой именно конфиг??

chebotarevmichael commented Dec 7, 2017

Кто пояснит, в какой именно файл это вписать? Какой именно конфиг??

@MargaretKrutikova

This comment has been minimized.

Show comment
Hide comment
@MargaretKrutikova

MargaretKrutikova Dec 27, 2017

In webpack.config.js in the section with rules. This is what works for me (slightly different from the proposed solution):

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      exclude: /node_modules/,
      use: {
        loader: 'url-loader?limit=1024&name=/fonts/[name].[ext]'
      }
    }
  ]
}

You also need to install url-loader and file-loader for webpack with this command (if using npm):

npm install --save-dev url-loader file-loader

MargaretKrutikova commented Dec 27, 2017

In webpack.config.js in the section with rules. This is what works for me (slightly different from the proposed solution):

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      exclude: /node_modules/,
      use: {
        loader: 'url-loader?limit=1024&name=/fonts/[name].[ext]'
      }
    }
  ]
}

You also need to install url-loader and file-loader for webpack with this command (if using npm):

npm install --save-dev url-loader file-loader
@kshitijmehta

This comment has been minimized.

Show comment
Hide comment
@kshitijmehta

kshitijmehta Apr 12, 2018

Hi,

I am using Webpack + Vue2 project, I am having the same problem,
The fonts inside the SCSS are not getting resolved. Below is the config, Can anyone help me on this.

Webpack rules

{
test: /.vue$/, //Match the file extention
loader: 'vue-loader', //Loader type
options: vueLoaderConfig
},
{
test: /.(woff2?|woff|eot|ttf|otf|svg)(?.*)?$/,
loader: 'url-loader', // i tried file-loader also
options: {
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

The vueLoaderConfig looks like this
{
"loaders":{
"scss":[
{
"loader":"myapppath\node_modules\extract-text-webpack-plugin\dist\loader.js",
"options":{
"omit":1,
"remove":true
}
},
{
"loader":"vue-style-loader"
},
{
"loader":"css-loader",
"options":{
"sourceMap":true
}
},
{
"loader":"sass-loader",
"options":{
"sourceMap":true
}
}
],

},
"cssSourceMap":true,
"cacheBusting":true,
"transformToRequire":{
"video":[
"src",
"poster"
],
"source":"src",
"img":"src",
"image":"xlink:href"
}
}

main.js
import './assets/fonts/roboto/scss/roboto.scss'

roboto.scss
@font-face {
font-family: 'robotoblack';
src: url('/assets/fonts/roboto/roboto-black-webfont.eot');
src: url('/assets/fonts/roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
url('/assets/fonts/roboto/roboto-black-webfont.woff') format('woff'),
url('/assets/fonts/roboto/roboto-black-webfont.ttf') format('truetype'),
url('/assets/fonts/roboto/roboto-black-webfont.svg#robotoblack') format('svg');
font-weight: normal;
font-style: normal;
}

I tried to make the scss loader look like [css-loader , resolve-url-loader , sass-loader]
But it didn't worked. The fonts are not getting created.

kshitijmehta commented Apr 12, 2018

Hi,

I am using Webpack + Vue2 project, I am having the same problem,
The fonts inside the SCSS are not getting resolved. Below is the config, Can anyone help me on this.

Webpack rules

{
test: /.vue$/, //Match the file extention
loader: 'vue-loader', //Loader type
options: vueLoaderConfig
},
{
test: /.(woff2?|woff|eot|ttf|otf|svg)(?.*)?$/,
loader: 'url-loader', // i tried file-loader also
options: {
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

The vueLoaderConfig looks like this
{
"loaders":{
"scss":[
{
"loader":"myapppath\node_modules\extract-text-webpack-plugin\dist\loader.js",
"options":{
"omit":1,
"remove":true
}
},
{
"loader":"vue-style-loader"
},
{
"loader":"css-loader",
"options":{
"sourceMap":true
}
},
{
"loader":"sass-loader",
"options":{
"sourceMap":true
}
}
],

},
"cssSourceMap":true,
"cacheBusting":true,
"transformToRequire":{
"video":[
"src",
"poster"
],
"source":"src",
"img":"src",
"image":"xlink:href"
}
}

main.js
import './assets/fonts/roboto/scss/roboto.scss'

roboto.scss
@font-face {
font-family: 'robotoblack';
src: url('/assets/fonts/roboto/roboto-black-webfont.eot');
src: url('/assets/fonts/roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
url('/assets/fonts/roboto/roboto-black-webfont.woff') format('woff'),
url('/assets/fonts/roboto/roboto-black-webfont.ttf') format('truetype'),
url('/assets/fonts/roboto/roboto-black-webfont.svg#robotoblack') format('svg');
font-weight: normal;
font-style: normal;
}

I tried to make the scss loader look like [css-loader , resolve-url-loader , sass-loader]
But it didn't worked. The fonts are not getting created.

@iksent

This comment has been minimized.

Show comment
Hide comment
@iksent

iksent Jul 30, 2018

Try to install modules:

yarn add style-loader
yarn add css-loader
yarn add url-loader

Then in webpack.config.js add:

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ],
},

And make import of CSS file (For example i have):
require ('react-notifications/dist/react-notifications.css');

iksent commented Jul 30, 2018

Try to install modules:

yarn add style-loader
yarn add css-loader
yarn add url-loader

Then in webpack.config.js add:

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ],
},

And make import of CSS file (For example i have):
require ('react-notifications/dist/react-notifications.css');

@kenan0122

This comment has been minimized.

Show comment
Hide comment
@kenan0122

kenan0122 Aug 30, 2018

ERROR in ../node_modules/iview/dist/styles/fonts/ionicons.ttf?v=3.0.0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ../node_modules/iview/dist/styles/iview.css 6:5023-5062
@ ./js/pages/flex.js
@ multi ./js/pages/flex.js

How to solve this problem?

kenan0122 commented Aug 30, 2018

ERROR in ../node_modules/iview/dist/styles/fonts/ionicons.ttf?v=3.0.0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ../node_modules/iview/dist/styles/iview.css 6:5023-5062
@ ./js/pages/flex.js
@ multi ./js/pages/flex.js

How to solve this problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment