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!