Compile component SCSS separately?

[Lukewh]

To help with packaging components as individual pieces have you considered compiling separately?

There's been talk of making the patterns mix-and-match so why not do the same with the React components.

A component file structure could be like:

components/ 
    Button/
        Button.js
        Button.scss
        Button.css

• Button.js would import './Button.css'.
• Button.css would contain the compiled code for Button.scss.
• Btutton.scss would be @import 'vanilla-framework/scss/_patterns_buttons.scss'.

It seems convoluted, and maybe a better way would be to automate the compilation to each folder (removing the need for Button.scss). Or maybe an even better way would be not to do this at all.

Just an idea, and open to discussion/ being shot down.

[barrymcgee]

@Lukewh I really like this idea and it would make it much easier to debug problems such as the .p-switch component not inheriting styles. The main issue I had with this approach was that we would not be able to inherit directly from the vanilla-framework package but your suggested approach above addresses this. Certainly worth a spike!