shakacode / font-awesome-loader

Webpack Loader for Font Awesome Using Sass

font-awesome-loader

Font awesome configuration and loading package for webpack, using font-awesome (Sass).

Usage

---

• Webpack 1
• Webpack 2

Credits

• Based on font-awesome-webpack (gowravshekar)

font-awesome-loader's Issues

Not compatible with ExtractTextWebpack 2.0.0

Been using this config with extract-text-webpack-plugin

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
  }),
  styles: {
    'mixins': true,
    ...
  },
};

was working fine before, until the update then it produces an error with following message:

ERROR in ./~/font-awesome-loader/index.loader.js!./internal/webpack/font-awesome.config.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object]' in '/Users/diondirza/Projects/Site/midtrans/lemonade/internal
/webpack'
 @ ./~/font-awesome-loader/index.loader.js!./internal/webpack/font-awesome.config.js 1:0-261
 @ multi regenerator-runtime/runtime bootstrap-loader/extractStyles font-awesome-loader!./internal/webpack/font-awesome.config.js ./src/client/index.j
s

Any clue to fix this?

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

Font awsome loader breaks in webpack 2.

It seems it can be simply prevented by changing

require("style!css!sass!./font-awesome-styles!./font-awesome.config.js");

to

require("style!css!sass!./font-awesome-styles.loader!./font-awesome.config.js");

in font-awesome-loader/index.js. This change wont break anything in older webpack versions. I checked on bootstrap-loader basic example, but it may impact other things I don't know of.

At the moment I'm blocked by this while working on Extract text plugin 2 support (It needs webpack 2) for bootstrap loader (I'm updating some of the dependencies in example projects).

Rework to work with webpack 2 better

Hi,

We've been reworking extract-text-webpack-plugin internals. Now extract (the loader) portion returns an object that can contain functions. That doesn't go well with font-awesome-loader and serializing to a string doesn't quite work as it's a lossy transformation.

I had a quick chat with Tobias about the topic and here are the recommendations we came up with:

Rework the Configuration Approach

Instead of going through an entry, you could try

[
  {
    test: /font-awesome\.config\.js/
    use: [
      { loader: "style-loader", options: { ... } },
      { loader: "font-awesome-loader" }
    ]
  }
]

Don't Stringify Queries

This is the current pain point. To quote Tobias:

For complex loader options you don't stringify the query. Instead you reference the ident of the options object. my-loader??my-ident will use the options object with the ident my-ident.

Conclusion

Let me know if there's anything to clarify. I would love to see this work completed so we can refer to it in how to port to the new internals.