create-react-app-sass.md

How to use SASS with create-react-app

This will require only one dependency, and one line added to your package.json and it's super fast.

1. Create an app wih create-react-app.
2. Install node-sass.
3. Create your base sass file inside src/sass.
4. Add a new script to package json that will watch the file, process sass and compile it into src/css.
5. Include the compiled css into React via require, this way your app will reload whenever the new css is compiled.
6. ran the new script along with npm start.

Ta da!

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './css/index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

package.json

{
  "name": "example",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.2.0"
  },
  "dependencies": {
    "react": "^15.2.1",
  },
  "scripts": {
    "start": "react-scripts start & npm run styles",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "styles": "node-sass --include-path ./node_modules/ ./src/scss/index.scss -w  -o ./src/css"
  }
}