How can I build font-awesome to separate css file?

[OEvgeny]

I tried to build it with provided examples, but no luck. Here is my webpack config:

var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
    entry: [
       "./src/js/main.js"
    ],
    output: {
        path: __dirname + '/dist',
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [{
            test: /\.styl$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
        },
        { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "url-loader?limit=10000&minetype=application/font-woff" 
        },
        { 
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader" 
        },
        { 
            test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
            loader: "file-loader" 
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
};

And font-awesome.config.js:

module.exports = {
    postStyleLoaders: [
        require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}'
    ],
    styles: {
        'mixins': true,
        'bordered-pulled': true,
        'core': true,
        'fixed-width': true,
        'icons': true,
        'larger': true,
        'list': true,
        'path': true,
        'rotated-flipped': true,
        'animated': true,
        'stacked': true
    }
};

Webpack includes some of my node_modules to dependencies and tries to build it. It looks like:

>webpack
Hash: ef705b39f420a45a2953                                                                             
Version: webpack 1.7.2                                                                                 
Time: 5017ms                                                                                           
   Asset    Size  Chunks             Chunk Names                                                       
 main.js  816319       0  [emitted]  main                                                              
main.css   19411       0  [emitted]  main                                                              
   [0] multi main 40 {0} [built]                                                                       
   [1] ./src/font-awesome.config.js 465 {0} [built]                                                    
   [2] ./src/js/main.js 3497 {0} [built]                                                               
   [3] ./src/js/slider.js 6876 {0} [built]                                                             
    + 193 hidden modules                                                                               

WARNING in (webpack)/~/enhanced-resolve/~/graceful-fs/fs.js                                            
Critical dependencies:                                                                                 
11:12-19 require function is used in a way, in which dependencies cannot be statically extracted       
 @ (webpack)/~/enhanced-resolve/~/graceful-fs/fs.js 11:12-19      
...                                     
ERROR in (webpack)/~/watchpack/~/chokidar/~/readdirp/~/minimatch/test/extglob-ending-with-state-char.js                                  
Module not found: Error: Cannot resolve module 'tap' in C:\workplace\hugo\test\work\node_modules\webpack\node_modules\watchpack\node_modu
les\chokidar\node_modules\readdirp\node_modules\minimatch\test                                                                           
@ (webpack)/~/watchpack/~/chokidar/~/readdirp/~/minimatch/test/extglob-ending-with-state-char.js 1:11-25        

I'm new on webpack. So, what am I doing wrong?

[gowravshekar]

As per the log, graceful-fs/fs.js and test/extglob-ending-with-state-char.js contains require() statements which are unable to resolve by webpack.

@OEvgeny, you need to check why those files are parsed by webpack. Check the various require() statements you have added apart from the library code. Use webpack -c --display-error-details to get a verbose error output.

[OEvgeny]

Thanks for response! Oh, found mistake on my first message. Problem occurres when I add my font-awesome.config.js to entries like this:

entry: [
   "./src/js/main.js",
   "./src/font-awesome.config.js"
],

I found that when I comment lines aded to font-awesome.config.js from redme guide. I got build without errors, (and without font-awesome).

postStyleLoaders: [
    //require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}'
],

[gowravshekar]

Instead of directly adding the config file in entry, create a separate .js file and put the following line in the new file require('font-awesome-webpack!relative_path_to_your_font_awesome_config_js');. Then add the new .js file in your entry. Also, keep the postStyleLoaders in your config file. Let me know whether this resolve your issue.

[OEvgeny]

Ok, got it to work. Add new file in src/js folder fa.js. And write:

require('font-awesome-webpack!../font-awesome.config.js ');

Add font-awesome.config.js and .less to src/ folder.

And add fa.js to entries:

entry: [
   "./src/js/main.js",
   "./src/js/fa.js"
],

Also uncomment lines on font-awesome.config.js Is it right? Got this:

>webpack
Hash: 410ede7b3b376569f9a5                                                     
Version: webpack 1.7.2                                                         
Time: 4625ms                                                                   
                                 Asset    Size  Chunks             Chunk Names 
  f7c2b4b747b1a225eb8dee034134a1b0.eot   60767          [emitted]              
97493d3f11c0a3bd5cbd959f5d19b699.woff2   56780          [emitted]              
 d9ee23d59d0e0e727b51368b458a0bff.woff   71508          [emitted]              
  706450d7bba6374ca02fe167d86685cb.ttf  122092          [emitted]              
  2980083682e94d33a66eef2e7d612519.svg  313398          [emitted]              
                               main.js  143986       0  [emitted]  main        
                              main.css   47964       0  [emitted]  main        
   [0] multi main 40 {0} [built]                                               
   [1] ./src/js/main.js 3599 {0} [built]                                       
   [2] ./src/js/fa.js 58 {0} [built]                                           
   [3] ./src/js/slider.js 6873 {0} [built]                                     
    + 31 hidden modules                                                        
Child extract-text-webpack-plugin:                                             
        + 21 hidden modules                                                    
Child extract-text-webpack-plugin:                                             
        + 2 hidden modules                                                     

Thank you! It's better, but still no separate css file for font. Now it's not so necessary. Feel free to close it, but if you have an idea I can test it.

[gowravshekar]

What are the css files generated from webpack?

As per the description mentioned in extract-text-webpack-plugin, It moves every require("css-file") in entry chunks into a separate css output file.

[OEvgeny]

I have one file main.css that contains font-awesome and my style sheets. You are right, I don't include font-awesome.less or anything else that can chunks into a separate css output file. Can't figure out how to do this with your great packege.

[gowravshekar]

Few things to try:

Keep only fa.js in your entry file and check whether you are getting fa.css generated. Try changing the loader options to extract-text-webpack-plugin in your config file, {"omit":1,"extract":true,"remove":true}

If things don't workout,

1. Remove the styles from your current config
2. Create a new less file and import required files from font-awesome styles
3. Require the new less file in fa.js.

[OEvgeny]

Can't build fa.js or fa.css. For some reason when I keep only one fa.js file in my config, it builds main.js and main.css instead...

[OEvgeny]

My new config

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
    entry: [
       //"./src/js/main.js",
       "./src/js/fa.js"
    ],
    output: {
        path: __dirname + '/webpack-build',
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [{
            test: /\.styl$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
        },
        { 
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "url-loader?limit=10000&minetype=application/font-woff" 
        },
        { 
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader" 
        },
        { 
            test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
            loader: "file-loader" 
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].css", {"omit":1,"extract":true,"remove":true})
    ]
};

[OEvgeny]

So, seems problem in my side. Thanks for help.