diff options
| -rw-r--r-- | .babelrc | 6 | ||||
| -rw-r--r-- | app/components/Login.css | 3 | ||||
| -rw-r--r-- | app/components/Login.js | 3 | ||||
| -rw-r--r-- | app/index.html | 1 | ||||
| -rw-r--r-- | package.json | 1 |
5 files changed, 12 insertions, 2 deletions
@@ -1,4 +1,8 @@ { "presets": ["es2015", "stage-0", "react"], - "plugins": ["transform-decorators-legacy", "transform-runtime"] + "plugins": ["transform-decorators-legacy", "transform-runtime", [ + "css-modules-transform", { + "extractCss": "./build/assets/stylesheets.css" + } + ]] } diff --git a/app/components/Login.css b/app/components/Login.css new file mode 100644 index 0000000000..b59a5dbc86 --- /dev/null +++ b/app/components/Login.css @@ -0,0 +1,3 @@ +.container { + border: 1px solid green; +}
\ No newline at end of file diff --git a/app/components/Login.js b/app/components/Login.js index b2e373ff13..d2cea86b42 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -1,4 +1,5 @@ import React, { Component, PropTypes } from 'react'; +import styles from './Login.css'; export default class Login extends Component { static propTypes = { @@ -16,7 +17,7 @@ export default class Login extends Component { render() { return ( - <div> + <div className={styles.container}> <h2>Login</h2> <input ref="username" type="text" /> <button onClick={::this.handleLogin}>Log In</button> diff --git a/app/index.html b/app/index.html index 8811fb2df4..afe6566ca5 100644 --- a/app/index.html +++ b/app/index.html @@ -2,6 +2,7 @@ <html> <head> <title>My App</title> + <link rel="stylesheet" href="./assets/stylesheets.css" /> </head> <body> <div id="app"></div> diff --git a/package.json b/package.json index 7ac69b3be2..4a6324d053 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "babel-cli": "^6.22.2", "babel-core": "^6.2.1", "babel-eslint": "^7.1.1", + "babel-plugin-css-modules-transform": "^1.2.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-es2015": "^6.1.18", |