From 53d2ffa7bc9319722addced5bb94c5b231726a1b Mon Sep 17 00:00:00 2001 From: Dmitri Pisarev Date: Thu, 7 Apr 2016 23:17:01 +0300 Subject: [PATCH] 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. --- Hello.css | 5 +++++ Hello.js | 5 ++++- index.html | 1 + package.json | 7 +++++-- webpack.config.js | 8 +++++++- 5 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 Hello.css diff --git a/Hello.css b/Hello.css new file mode 100644 index 0000000..a73bee7 --- /dev/null +++ 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 index 6f0306f..011b32f 100644 --- 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
Hello {this.props.name}
; + return
Hello {this.props.name}
; } }); diff --git a/index.html b/index.html index ff81169..2621338 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ Server-side rendering tutorial +
diff --git a/package.json b/package.json index fad971c..89c40c7 100644 --- 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 index 65ea2ee..704b580 100644 --- 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 }