Search code examples
reactjssasscreate-react-app

How exactly to use node-sass with create-react-app 2 efficiently?

So, with create-react-app@v1, I used to write gulp tasks to minify and compile SASS, which was not in real time, but now in create-react-app@v2, Facebook has supported node-sass to compile and reflect changes in real-time. So, my question is that

With node-sass, where do I put my styles.scss?

I've tried to put it in index.html, but it's not working, so perhaps index.js will solve the problem?

Will CRA2 minify my SASS in styles.min.css once I npm run build ?

Solution

  • Put your styles in /src/App.scss, and update src/App.js (the top-level JS file/index) to include App.scss instead of .css. This will cause CRA to automatically compile/post-process the SCSS.

    See also: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet