Skip to content
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 · 48 comments
Closed

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

mattybow opened this issue Jan 30, 2015 · 48 comments

Comments

@mattybow
Copy link

@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
Copy link
Author

@mattybow 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' }
@MayasHaddad
Copy link

@MayasHaddad MayasHaddad commented Jun 6, 2015

@mattybow Thanks for solving it ;)

@Go7hic
Copy link

@Go7hic Go7hic commented Sep 26, 2015

thx

@TonyWang031
Copy link

@TonyWang031 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
Copy link

@TheWaWaR TheWaWaR commented Nov 13, 2015

Thanks @mattybow

@polinom
Copy link

@polinom polinom commented Jan 12, 2016

👍

@wpcarro
Copy link

@wpcarro 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
Copy link

@cusspvz cusspvz commented Feb 26, 2016

@wpcarro which css-loader version are you using ?

@wpcarro
Copy link

@wpcarro 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
Copy link

@cusspvz 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
Copy link

@wpcarro wpcarro commented Feb 26, 2016

@cusspvz thanks for the detailed explanation and overview!

@zirho
Copy link

@zirho 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
Copy link

@mqliutie 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
Copy link

@mqliutie mqliutie commented May 23, 2016

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

@oscaroceguera
Copy link

@oscaroceguera 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
Copy link

@psegarel psegarel commented Nov 17, 2016

You can find the full solution here
webpack-bootstrap

@eden-lane
Copy link

@eden-lane eden-lane commented Dec 10, 2016

None of this works for me

@quantuminformation
Copy link

@quantuminformation 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
Copy link

@MartianLee 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
Copy link

@mbeauchamp7 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');
}
@qburst-hrishikesh
Copy link

@qburst-hrishikesh qburst-hrishikesh 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
Copy link
Author

@mattybow 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

@qburst-hrishikesh
Copy link

@qburst-hrishikesh qburst-hrishikesh 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
Copy link

@imrealashu imrealashu commented Mar 5, 2017

Thanks @mattybow 👍

@kishan3
Copy link

@kishan3 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
Copy link

@brandonreid 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
Copy link

@trkrameshkumar trkrameshkumar commented Jun 18, 2017

Thanks! @mattybow , for sharing the solution :)

@zyxneo
Copy link

@zyxneo 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.

@taha-k
Copy link

@taha-k 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
Copy link

@rinogo 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
Copy link

@ahmadalfy 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
Copy link

@anzcarroll 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
Copy link

@ahmadalfy ahmadalfy commented Nov 13, 2017

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

@rosethorn999
Copy link

@rosethorn999 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
Copy link

@chebotarevmichael chebotarevmichael commented Dec 7, 2017

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

@MargaretKrutikova
Copy link

@MargaretKrutikova 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
Copy link

@kshitijmehta 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
Copy link

@iksent 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
Copy link

@kenan0122 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?

@alphonse92
Copy link

@alphonse92 alphonse92 commented Nov 21, 2018

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

@cleverboy32
Copy link

@cleverboy32 cleverboy32 commented Dec 25, 2018

i cant fix the probelm.

in one css file name a.css
@font-face { font-family: 'som-ui-icons'; src: url('~./fonts/som-ui-icons.woff?t=1472440741') format('woff'), url('~./fonts/som-ui-icons.ttf?t=1472440741') format('truetype'); font-weight: normal; font-style: normal; }

i import the a.css in index.css
@import 'src/styles/a.css';
error:
Can't resolve './fonts/som-ui-icons.ttf?t=1472440741' in 'index.css'

it go to found font file in index.css path。。。。 hope who can help me.
my css-test-rule
{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, { loader: 'postcss-loader' }, { loader: 'resolve-url-loader', options: { sourceMap: true } } ] }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader', options: { limit: 8192 } }

@nataliepan
Copy link

@nataliepan nataliepan commented Jan 22, 2019

yarn add -D react-scripts worked for me

@hussainakram
Copy link

@hussainakram hussainakram commented Jul 15, 2020

Just check the extension mentioned in the errored file. For my case it was missing woff2 so I just added it and all worked fine!

{
  test: /\.(jpe?g|png|gif|ico|woff|woff2)$/, // <=== match if you have required extension listed here or add it
  use: {
    loader: 'url-loader',
  },
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.