Building separate css for components in CRA app with SASS

45 Views Asked by At

Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.

My current project setup is:

/src/App.js

/src/components/

  • index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')

/src/components/{component-name}

  • {component-name.js}
  • {component-name.scss}

Currently trying [email protected] and [email protected], but not sure about the proper setup.

Might need to do a modular setup to accomplish this or just stick with JSS?

0

There are 0 best solutions below