You want to use SASS - there is also a webpack plugin to use it, but to be able to change the webpack-config of create-react-app, you would need to eject the settings. The bad news is that this is a one-way operation and can't be undone. It also moves a lot of stuff that is normally packed inside the node_modules folder of create-react-app right into your project root. It also makes future updates through npm harder.


create-react-app can be configured to not use the default react-scripts package which orchestrates the build and development process of your react app. Instead, a user created custom-react-scripts which allows you to put some configuration options into a config file in your project root to tweak the behaviour of create-react-app - for example to support the webpack SASS plugin amongst other features.


Normally, you would call create-react-app my-application from the commandline to create a react bootstrap inside your current folder.

Instead, try this command:

create-react-app my-application --scripts-version custom-react-scripts

This does the same thing - but uses the custom-react-scripts plugin. Now, you can create a .env file inside your project root (yes, no filename) and place the following option inside it:


Thats it. Now webpack will import and pack your SASS files as well!

More Information

You can control more features than just SASS from your config file. You can also enable LESS support, as well as stylus, css modules and features of the babel compiler. You should read the documentation of the plugin, here.