Merge pull request #496 from jhen0409/patch-4

Move font-awesome import to `app.global.css`
yohe88 · Nov 2, 2016 · 2d0c0e4 · 2d0c0e4
2 parents e13af49 + 505859e
commit 2d0c0e4
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -105,17 +105,9 @@ externals: [
 ]
 ```
 
-For a common example, to install Bootstrap, `npm i --save bootstrap` and link them in the head of app.html
-
-```html
-<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
-<link rel="image/svg+xml" href="../node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot" />
-...
-```
-
-Make sure to list bootstrap in externals in `webpack.config.base.js` or the app won't include them in the package:
+For a common example, to install bcrypt, `npm i --save bcrypt`, and make sure to list bcrypt in externals in `webpack.config.base.js` or the app won't include them in the package:
 ```js
-externals: ['bootstrap']
+externals: ['bcrypt']
 ```
 
 
@@ -129,6 +121,12 @@ All `.css` file extensions will use css-modules unless it has `.global.css`.
 If you need global styles, stylesheets with `.global.css` will not go through the
 css-modules loader. e.g. `app.global.css`
 
+If you want to import global css libraries (like `bootstrap`), you can just write the following code in `.global.css`:
+
+```css
+@import "~bootstrap/dist/css/bootstrap.css";
+```
+
 
 ## Packaging
 

diff --git a/app/app.global.css b/app/app.global.css
@@ -1,3 +1,5 @@
+@import "~font-awesome/css/font-awesome.css";
+
 body {
   position: relative;
   color: white;

diff --git a/app/app.html b/app/app.html
@@ -3,14 +3,12 @@
   <head>
     <meta charset="utf-8">
     <title>Hello Electron React!</title>
-    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
-
     <script>
       (function() {
         if (!process.env.HOT) {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
-          link.href = './style.css';
+          link.href = './dist/style.css';
           document.write(link.outerHTML);
         }
       }());
@@ -24,7 +22,7 @@
         const port = process.env.PORT || 3000;
         script.src = (process.env.HOT)
           ? 'http://localhost:' + port + '/dist/bundle.js'
-          : './bundle.js';
+          : './dist/bundle.js';
         document.write(script.outerHTML);
       }
     </script>

diff --git a/app/package.json b/app/package.json
@@ -11,7 +11,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "font-awesome": "^4.6.3",
     "source-map-support": "^0.4.3"
   }
 }
diff --git a/package.json b/package.json
@@ -121,6 +121,7 @@
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "fbjs-scripts": "^0.7.1",
+    "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.24.0",
     "jsdom": "^9.8.3",
     "json-loader": "^0.5.4",
@@ -132,6 +133,7 @@
     "spectron": "^3.4.0",
     "style-loader": "^0.13.1",
     "tcomb": "^3.2.15",
+    "url-loader": "^0.5.7",
     "webpack": "^1.13.3",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.1",

diff --git a/webpack.config.development.js b/webpack.config.development.js
@@ -50,7 +50,13 @@ export default validate(merge(baseConfig, {
           'style-loader',
           'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
         ]
-      }
+      },
+
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
     ]
   },
 

diff --git a/webpack.config.electron.js b/webpack.config.electron.js
@@ -55,7 +55,6 @@ export default validate(merge(baseConfig, {
   },
 
   externals: [
-    'font-awesome',
     // 'source-map-support'
   ]
 }));
diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -2,6 +2,7 @@
  * Build config for electron 'Renderer Process' file
  */
 
+import path from 'path';
 import webpack from 'webpack';
 import validate from 'webpack-validator';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
@@ -18,6 +19,7 @@ const config = validate(merge(baseConfig, {
   ],
 
   output: {
+    path: path.join(__dirname, 'app/dist'),
     publicPath: '../dist/'
   },
 
@@ -39,7 +41,13 @@ const config = validate(merge(baseConfig, {
           'style-loader',
           'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
         )
-      }
+      },
+
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
     ]
   },
 
@@ -62,7 +70,7 @@ const config = validate(merge(baseConfig, {
     }),
     new ExtractTextPlugin('style.css', { allChunks: true }),
     new HtmlWebpackPlugin({
-      filename: 'app.html',
+      filename: '../app.html',
       template: 'app/app.html',
       inject: false
     })