diff --git a/README.md b/README.md index 989f6f4..4793ca6 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ Font Awesome configuration and loading package for webpack, using font-awesome ( Based on [font-awesome-webpack](https://github.com/gowravshekar/font-awesome-webpack) by [Gowrav Shekar](https://github.com/gowravshekar) ([@gowravshekar](https://www.npmjs.com/~gowravshekar)) and [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader/) by [Shaka Code](https://github.com/shakacode) ([@justin808](https://www.npmjs.com/~justin808)). -Version 1! +Version 2! ---------- -The version 1 of font-awesome-sass-loader is only compatible with webpack v1. -If you want to use another version of webpack, please check the [master branch](https://github.com/francisbesset/font-awesome-sass-loader). +The version 2 of font-awesome-sass-loader is only compatible with webpack v2. +If you use the version 1 of webpack, please check the [v1 branch](https://github.com/francisbesset/font-awesome-sass-loader/tree/v1). Usage ----- @@ -19,11 +19,22 @@ To properly load font-awesome fonts, you need to configure loaders in your `webp ``` javascript module.exports = { module: { - loaders: [ + rules: [ // the url-loader uses DataUrls. // the file-loader emits files. - { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, - { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } + { + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + options: { + limit: 10000, + mimetype: 'application/font-woff' + } + }, + { + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + use: [ + { loader: 'file-loader' } + ] + } ] } }; @@ -106,13 +117,13 @@ $fa-border-color: #ddd; ### extract-text-webpack-plugin -Configure style loader in `font-awesome-sass.config.js`. +Configure extractStyles in `font-awesome-sass.config.js`. Example: ``` javascript module.exports = { - styleLoader: require("extract-text-webpack-plugin").extract("style-loader", "css-loader!sass-loader"), + extractStyles: true, styles: { ... @@ -121,3 +132,13 @@ module.exports = { ``` Install `extract-text-webpack-plugin` before using this configuration. + +### Custom style loaders + +Example: + +``` javascript +module.exports = { + styleLoaders: ["style-loader", "css-loader", "sass-loader"], +}; +``` diff --git a/examples/extract-css/font-awesome.config.js b/examples/extract-css/font-awesome.config.js index 4e4d9da..488481c 100644 --- a/examples/extract-css/font-awesome.config.js +++ b/examples/extract-css/font-awesome.config.js @@ -1,5 +1,5 @@ module.exports = { - styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!sass-loader'), + extractStyles: true, styles: { "mixins": true, diff --git a/examples/extract-css/package.json b/examples/extract-css/package.json index 6db05ef..a2990c3 100644 --- a/examples/extract-css/package.json +++ b/examples/extract-css/package.json @@ -8,7 +8,7 @@ "dependencies": { "css-loader": "*", "style-loader": "*", - "extract-text-webpack-plugin": "^1", + "extract-text-webpack-plugin": "^2", "file-loader": "*", "font-awesome": "^4.6.0", "font-awesome-sass-loader": "^1.0", @@ -16,6 +16,6 @@ "node-sass": "*", "sass-loader": "*", "url-loader": "*", - "webpack": "^1" + "webpack": "^2" } } diff --git a/examples/extract-css/webpack.config.js b/examples/extract-css/webpack.config.js index 6639110..792d668 100644 --- a/examples/extract-css/webpack.config.js +++ b/examples/extract-css/webpack.config.js @@ -1,21 +1,42 @@ +const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { - 'font-awesome': 'font-awesome-sass!./font-awesome.config.js', + 'font-awesome': 'font-awesome-sass-loader!./font-awesome.config.js', }, output: { - path: './public/assets', + path: path.resolve(__dirname, 'public', 'assets'), publicPath: '/assets/', filename: '[name].js', }, + plugins: [ + new ExtractTextPlugin({ + filename: '[name].css', + disable: false, + allChunks: true, + }), + ], module: { - loaders: [ - { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, - { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, + rules: [ + { + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + use: [ + { + loader: 'url-loader', + options: { + limit: 10000, + mimetype: 'application/font-woff', + }, + }, + ], + }, + { + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + use: [ + { loader: 'file-loader' }, + ], + }, ], }, - plugins: [ - new ExtractTextPlugin("[name].css"), - ], }; diff --git a/font-awesome-sass.config.js b/font-awesome-sass.config.js index 60e920d..a8cac6f 100644 --- a/font-awesome-sass.config.js +++ b/font-awesome-sass.config.js @@ -1,9 +1,9 @@ module.exports = { // Default for the style loading - //styleLoader: "style-loader!css-loader!sass-loader", + //styleLoaders: ["style-loader", "css-loader", "sass-loader"], // If you want to use the ExtractTextPlugin - //styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!sass-loader'), + //extractStyles: true, // Use fontAwesomeCustomizations to utilize other sass variables defined in // _variables.scss file. This is useful to set one customization value based diff --git a/index.loader.js b/index.loader.js index cc7630a..fa38d96 100644 --- a/index.loader.js +++ b/index.loader.js @@ -5,15 +5,22 @@ module.exports.pitch = function (remainingRequest) { if (!configFilePath || configFilePath.trim() === '') { var msg = 'You specified the font-awesome-sass-loader with no configuration file. Please specify' + - ' the configuration file, like: \'font-awesome-sass!./font-awesome-sass.config.js\' or use' + + ' the configuration file, like: \'font-awesome-sass-loader!./font-awesome-sass.config.js\' or use' + ' require(\'font-awesome-sass-loader\').'; console.error('ERROR: ' + msg); throw new Error(msg); } var config = require(configFilePath); - var styleLoader = config.styleLoader || 'style-loader!css-loader!sass-loader'; - return 'require(' + JSON.stringify('-!' + styleLoader + '!' + + var styleLoaders = config.styleLoaders || ['style-loader', 'css-loader', 'sass-loader']; + if (config.extractStyles) { + styleLoaders = [ + require('extract-text-webpack-plugin').loader().loader + '?{"omit":1,"remove":true}', + styleLoaders.join('!'), + ]; + } + + return 'require(' + JSON.stringify('-!' + styleLoaders.join('!') + '!' + require.resolve('./font-awesome-sass-styles.loader.js') + '!' + configFilePath) + ');'; };