/ parceljs

Usando ParcelJs (parceljs.org) com SCSS

Para quem quer usar CSS com os arquivos com SCSS com o ParcelJs a solução é bem simples.

Crie na pasta raiz do projeto o arquivo .postcssrc com o seguinte conteúdo:

{
  "modules": true
}

E pronto, agora você já pode importar diretamente no seu código javascript o arquivo .scss

import './styles/main.scss';

Se por algum motivo os seus estilos não estiverem funcionando, é porque o postcss pede que seus estilos sejam globais, então tente fazer o seguinte com o seu arquivo css:

.mySample {
    .mySubSample {
    }
}

Transforme para:

:global .mySample {
    .mySubSample {
    }
}

Que então o seu estilo será renderizado.

Uma outra forma interessante de se usar é jogando o seu estilo para uma variavel e acessando ele como se fosse um objeto como a seguir (neste caso não use :global):

import styles from './styles/main.scss';

const myComponent = () => <div className={styles.mySample}></div>;

// Or
const myComponent = () => <div className={styles.mySample.mySubSample}></div>;

Na dúvida, reinicie seu servidor do parceljs para que as mudanças surtam efeito.