Parcel: 🙋Parcel & React & Per-Component SCSS/CSS

[tatsujb]

I'm pretty sure this might not be a feature-request and already possible but I just don't know how to do it, if it's not currently a doable here it is:

Could we set up an environment with parcel where each component has it's own, compartmentalized, SCSS style file that do not interfere with each other (E.G. you can even have the same class names in two files and they won't apply to both elements on your Webapp that use them, each component will receive it's designated one.)

I've seen this done before in an angular 4 project and I know it used to be possible with webpack : https://javascriptplayground.com/css-modules-webpack-react/

but I'd like to accomplish this with parcel instead.

I've followed this guide :

https://www.valentinog.com/blog/tutorial-react-parcel-bundler/

to set up Parcel-React. (and I added node-sass and my scss are working fine)

[fathyb]

Hey, we've already resolved this privatly but I'm going to add it here so it can help people finding this issue :

• Create a .postcssrc and set the modules option to true
js { "modules": true }

• import/require your class :

  import {myClass} from './my-style.css'
  
  console.log('myClass = ', myClass) // outputs "myClass = _myClass_j9e8f_1"
  
  const usingJsx = <div className={myClass}/>
  

This is a pretty common issue newcomers are encountering, maybe we should make it more explicit in the website? I'm closing this, but feel free to reopen if it does not resolve the issue.