Working with sass and react

Question

I am learning React and I have already created a few apps with CRA. I haven't found a good and easy way to include sass on my react projects so I came up with this:

install node-sass on the src folder

add this to the package.json:

"node:sass": "node-sass src/index.scss src/index.css -w"

then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.

is there any problems with doing that?

I've read some tutorials to config webpack to use sass but it sounded to complicated.

iHowell · Accepted Answer · 2018-03-17 19:28:02Z

1

Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46

For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.

Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem

answered Mar 17, 2018 at 19:28

iHowell

2,4652 gold badges27 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pinki Gupta · Accepted Answer · 2018-03-18 07:13:31Z

0

If you want to use sass in your react app, install chokidar It will help you: https://www.npmjs.com/package/react-scripts-sass-chokidar

answered Mar 18, 2018 at 7:13

Pinki Gupta

183 bronze badges

Comments

Mohamed Allal · Accepted Answer · 2018-11-02 12:17:22Z

0

Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

All you need is to install node-sass if not already

npm i node-sass --save-dev

And then make sure you import files with scss extension. If you need to change old css files, change the extension, and so follow with the imports.

answered Nov 2, 2018 at 12:17

Mohamed Allal

21.4k6 gold badges107 silver badges110 bronze badges

Collectives™ on Stack Overflow

Working with sass and react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related