css-loader: css-loader parse fail on @font-face

I needed to add url-loader to my config

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

None of this works for me

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’ }

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

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.

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');
}

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

👍

You can find the full solution here webpack-bootstrap

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)

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

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.

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");
}

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

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

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');

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’ }

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

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'}

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

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