diff --git a/README.md b/README.md index d60e298..0417365 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,6 @@ are saved from having to stop/restart your backend server manually. The following improvements need to be made: * Add a production build flag that removes source maps and minifies js/html. - * Add loaders to support SASS and introduce a base stylesheet as an example. I welcome pull requests, but I am trying to keep this skeleton relatively minimal. diff --git a/package.json b/package.json index 2bce4ef..2dc1a59 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "express": "^4.13.3", "gulp": "^3.9.0", "html-webpack-plugin": "^1.6.1", + "node-sass": "^3.4.2", "nodemon": "^1.7.1", "react-hot-loader": "^1.3.0", "react-transform-catch-errors": "^1.0.0", diff --git a/src/frontend/Root.js b/src/frontend/Root.js index 024e599..c0293f8 100644 --- a/src/frontend/Root.js +++ b/src/frontend/Root.js @@ -11,6 +11,8 @@ const reducer = combineReducers(reducers); const finalCreateStore = applyMiddleware(thunk)(createStore); const store = finalCreateStore(reducer); +require('!style!css!sass!./scss/root.scss'); + export default class Root extends React.Component { render() { const { history } = this.props; diff --git a/src/frontend/components/Application.js b/src/frontend/components/Application.js index effaee7..07a5553 100644 --- a/src/frontend/components/Application.js +++ b/src/frontend/components/Application.js @@ -2,11 +2,21 @@ import React from 'react'; import { fetchShouts } from '../actions'; import { connect } from 'react-redux'; +const style = require('!style/useable!css!sass!../scss/application.scss'); + class Application extends React.Component { constructor(props) { super(props); } + componentDidMount() { + style.use(); + } + + componentWillUnmount() { + style.unuse(); + } + componentWillMount() { this.props.dispatch(fetchShouts()); } diff --git a/src/frontend/scss/application.scss b/src/frontend/scss/application.scss new file mode 100644 index 0000000..c543eec --- /dev/null +++ b/src/frontend/scss/application.scss @@ -0,0 +1,3 @@ +li { + color: gray; +} diff --git a/src/frontend/scss/root.scss b/src/frontend/scss/root.scss new file mode 100644 index 0000000..5a16f6e --- /dev/null +++ b/src/frontend/scss/root.scss @@ -0,0 +1,3 @@ +h1 { + color: gray; +}