ton1
ton1

Reputation: 7628

React Styling with SCSS

I am digging a npm project, that project use .scss file for styling.

It imports style like below:

import styles from './node-content-renderer.scss'

and use it like an object to component's classname.

 <button
      type="button"
      className={styles.collapseButton}
 >

How does it can use styles like above? When I try that in my local environment, the styles is just {} (empty object). Even I install node-sass to my project.

The exist code link is : https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/blob/master/node-content-renderer.js

It use scss file like js object. How can I do that in my project? Should I set up some webpack config? Is there a any easier way that not disrupt my create-react-app based project?

Upvotes: 1

Views: 472

Answers (1)

pawelbylina
pawelbylina

Reputation: 1485

This feature is available for react-scripts above 2.0. You should follow the pattern from documentation: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Upvotes: 1

Related Questions