Create React App is a very useful tool to get up and running quickly, however I find the lack of Sass a bit annoying.

1st pass

In order to Sass into the project I had to eject from CRA and then import a Sass loader.

There was now the issue of Sass not being processed with Postcss. Adding postcss-loader to the Scss loaders config seems to fix that.

During development I think I've found out I'm loading these in the wrong order as I get errors regarding the comments. Using // is not allowed and I think that's because postcss is running sooner than I anticipated. Using the standard /* */ comments work fine.

I've had some difficulties in getting my usual assets structure into the React project. In the end I've created a scss/settings.scss file that imports in my required files. I then import this file into the top of every component that needs it.

2nd pass

I noticed that the production build was not creating an external css file and that the sass loader was probably to do with this. I also spotted Sass installing guidelines on the Create React App docs.

After removing my previous implementation and adding in the new one there was a little debugging to do. First I needed to update my version of node and npm. Then I had to run npm rebuild node-sass and npm install again.