Step 3: Add styles

Now lets learn to deal with styles. We configure webpack loaders to support loading CSS files. This is cool, but there comes one problem with server-side rendering: styles won't be loaded until all of JS loads, so no styles for devices without JS. Let's fix this problem with webpack's ExtractTextPlugin plugin: it extracts all CSS styles into one CSS file that we can serve to our client, so our page will instantly look perfectly styled, even without JS.
dimaip · May 12, 2016 · 53d2ffa · 53d2ffa
1 parent fad6b64
commit 53d2ffa
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git a/Hello.css b/Hello.css
@@ -0,0 +1,5 @@
+.Hello {
+    font-size: 3em;
+    font-family: sans-serif;
+    color: rebeccapurple;
+}
diff --git a/Hello.js b/Hello.js
@@ -1,8 +1,11 @@
 import React from 'react';
+if (process.env.BROWSER) {
+    require('Hello.css');
+}
 
 const Hello = React.createClass({
   render: function() {
-    return <div>Hello {this.props.name}</div>;
+    return <div className="Hello">Hello {this.props.name}</div>;
   }
 });
 

diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <title>Server-side rendering tutorial</title>
+    <link rel="stylesheet" href="/built/styles.css" />
 </head>
 <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -15,10 +15,13 @@
     "react-dom": "^0.14.8"
   },
   "devDependencies": {
-    "webpack": "^1.12.14",
     "babel-cli": "^6.6.5",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0"
+    "babel-preset-react": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const config = {
   entry: ['client.js'],
@@ -14,9 +15,14 @@ const config = {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel'
-      }
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style', 'css')
+      },
     ]
   },
+  plugins: [new ExtractTextPlugin('styles.css')],
   resolve: {
     root: __dirname
   }