feat (react-css-modules) implementation

grrseguin · Jun 29, 2016 · a307c3e · a307c3e
1 parent 4f13643
commit a307c3e
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,10 @@
 # ReactJS & webpack starter for Github issues
 
+## Installation
+```
+npm install
+```
+
 ## Get started
 ```
 npm start

diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link rel='stylesheet' href='./bin/app.css'>
   </head>
   <body>
     <div id="content"></div>

diff --git a/package.json b/package.json
@@ -5,13 +5,17 @@
   "main": "index.js",
   "dependencies": {
     "react": "^15.1.0",
+    "react-css-modules": "^3.7.6",
     "react-dom": "^15.1.0"
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },

diff --git a/src/components/Title.css b/src/components/Title.css
@@ -0,0 +1,3 @@
+.title {
+  color: yellow;
+}
diff --git a/src/components/Title.js b/src/components/Title.js
@@ -1,13 +1,16 @@
 import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Title.css';
+
 
 var Title = React.createClass({
   render: function() {
     return (
-      <h1 className="commentBox">
+      <h1 styleName='title'>
         Hello, world! I am a title.
       </h1>
     );
   }
 });
 
-export default Title;
+export default CSSModules(Title, styles);
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,15 +1,30 @@
+var
+  webpack = require('webpack'),
+  ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 module.exports = {
   entry: './src/app.js',
   output: {
     path: './bin',
-    filename: 'app.bundle.js'
+    filename: 'app.bundle.js',
+    publicPath: '/bin/'
   },
+  plugins: [
+    new ExtractTextPlugin('app.css', {
+      allChunks: true
+    }),
+    new webpack.NoErrorsPlugin()
+  ],
   module: {
     loaders:[
       {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
       }
     ]
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     <html>
       <head>
         <meta charset="utf-8">
+        <link rel='stylesheet' href='./bin/app.css'>
       </head>
       <body>
         <div id="content"></div>
@@ Expand Down @@