sass setup for create-react-app cli tool

readme.md

Create-React-App with Sass configuration

Here are instructions for add Sass support to an app built with create-react-app. Hopefully this will be redundant when Sass support is built into the tool! Visit their form and let them know you need Sass support.

Install the create-react-app tool from npm. This will be installed globally. We also need to install the loaders needed for webpack, and we will save those as development dependencies.

npm install -g create-react-app

create-react-app your-app-name
cd your-app-name
npm run eject
npm install --save-dev sass-loader node-sass

In the webpack.config.dev.js file, find the loaders array, and add:

{
  test: /\.sass$/,
  include: paths.appSrc,
  loaders: ['style', 'css', 'sass']
}

In the same file, find the exclude array and add:

/\.sass$/

We need to make similar changes to the webpack.config.prod.js file.

//in the loader array
{
  test: /\.sass$/,
  loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-autoprefixer!postcss!sass')
}

//in the exclude array
/\.sass$/

That is enough to get sass development up and running! The rest of this guide is about pushing to Github Pages.

We need to initialize the git project.

git init
git add -A
git commit -am "initial commit"
npm install --save-dev gh-pages

In the package.json file we need to add a few things:

//add the homepage where gh-pages will deploy to
"homepage": "http://<YOUR_NAME>.github.io/<PROJECT_TITLE>"

//in the scripts, add:
"scripts": {
  //..
  "deploy": "npm run build&&gh-pages -d build"
}