font-awesome via npm instead of CDN

Author: suomato

build/webpack.config.js

@@ -1,14 +1,15 @@
-var webpack = require('webpack');
-var path = require('path');
-var glob = require('glob');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var CleanWebpackPlugin = require('clean-webpack-plugin');
-var ManifestPlugin = require('webpack-manifest-plugin');
-var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
-var config = require('./config');
-var inProduction = process.env.NODE_ENV === 'production';
-var styleHash = inProduction ? 'contenthash' : 'hash';
-var scriptHash = inProduction ? 'chunkhash' : 'hash';
+const webpack = require('webpack');
+const path = require('path');
+const glob = require('glob');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const config = require('./config');
+
+const inProduction = process.env.NODE_ENV === 'production';
+const styleHash = inProduction ? 'contenthash' : 'hash';
+const scriptHash = inProduction ? 'chunkhash' : 'hash';
 
 module.exports = {
   entry: {
@@ -31,16 +32,12 @@ module.exports = {
             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
             // the "scss" and "sass" values for the lang attribute to the right configs here.
             // other preprocessors should work out of the box, no loader config like this necessary.
-            'scss': [
+            scss: ['vue-style-loader', 'css-loader', 'sass-loader'],
+            sass: [
               'vue-style-loader',
               'css-loader',
-              'sass-loader'
+              'sass-loader?indentedSyntax',
             ],
-            'sass': [
-              'vue-style-loader',
-              'css-loader',
-              'sass-loader?indentedSyntax'
-            ]
           },
           // other vue-loader options go here
         },
@@ -56,7 +53,7 @@ module.exports = {
             },
             {
               loader: 'sass-loader',
-              options: { sourceMap: true, },
+              options: { sourceMap: true },
             },
           ],
         }),
@@ -74,19 +71,29 @@ module.exports = {
             options: {
               name: '[name].[ext]',
               outputPath: 'images/',
-              publicPath: config.assetsPath + 'static/',
+              publicPath: `${config.assetsPath}static/`,
             },
           },
           'image-webpack-loader',
         ],
       },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: '[name].[hash:7].[ext]',
+          outputPath: 'fonts/',
+          publicPath: `${config.assetsPath}static/`,
+        },
+      },
     ],
   },
 
   resolve: {
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      'images': path.join(__dirname, '../resources/assets/images'),
+      vue$: 'vue/dist/vue.esm.js',
+      images: path.join(__dirname, '../resources/assets/images'),
     },
     extensions: ['*', '.js', '.vue', '.json'],
   },
@@ -98,14 +105,10 @@ module.exports = {
       host: 'localhost',
       port: 3000,
       proxy: config.devUrl, // YOUR DEV-SERVER URL
-      files: [
-        '../*.php',
-        '../resources/views/*.twig',
-        '../static/*.*',
-      ],
+      files: ['../*.php', '../resources/views/*.twig', '../static/*.*'],
     }),
 
-    new CleanWebpackPlugin(['static/css/*', 'static/js/*'], {
+    new CleanWebpackPlugin(['static/css/*', 'static/js/*', 'static/fonts/*'], {
       watch: true,
       root: path.resolve(__dirname, '../'),
     }),
@@ -122,10 +125,8 @@ if (inProduction) {
   module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin());
 
   module.exports.plugins.push(new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    })
-  );
-
+    'process.env': {
+      NODE_ENV: '"production"',
+    },
+  }));
 }

package.json

@@ -29,11 +29,13 @@
     "eslint-plugin-vue": "^2.1.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
+    "font-awesome": "^4.7.0",
     "image-webpack-loader": "^3.4.2",
     "node-sass": "^4.5.3",
     "prettier-eslint": "^8.2.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
     "vue-loader": "^13.0.4",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^3.4.1",

resources/assets/sass/_variables.sass

@@ -11,3 +11,6 @@ $red: $bc-secondary
 
 // HELPER URL
 $images: '../images'
+
+// FONT-AWESOME FONT PATH
+$fa-font-path: "../../../node_modules/font-awesome/fonts"

resources/assets/sass/main.sass

@@ -1,5 +1,6 @@
 @import "variables"
 @import "node_modules/bulma/bulma"
+@import "node_modules/font-awesome/scss/font-awesome"
 @import "pageloader"
 @import "components/index"
 @import "footer"

resources/views/header/_head.twig

@@ -27,8 +27,5 @@
 
   <link rel="pingback" href="{{ site.pingback_url }}"/>
 
-  {# TEMPORARY FROM CDN #}
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-
   {{ function('wp_head') }}
 </head>

yarn.lock

@@ -2585,6 +2585,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -4147,6 +4151,10 @@ mime@1.3.4:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.0.3.tgz#4353337854747c48ea498330dc034f9f4bbbcc0b"
 
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
@@ -6276,6 +6284,14 @@ unzip-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
 
+url-loader@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"