CODEWITHSUNDEEP
reactjssass
Emerson Lopes
Emerson Lopes

Reputation: 119

Working with sass and react

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.

Upvotes: 0

Views: 1014

Answers (3)

Mohamed Allal
Mohamed Allal

Reputation: 20860

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.

Upvotes: 0

Pinki Gupta
Pinki Gupta

Reputation: 18

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

Upvotes: 0

iHowell
iHowell

Reputation: 2447

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

Upvotes: 1

Related Questions