Reputation: 7628
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
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