React, require() and aleut setup

[mekanix]

I'm creating app where I need to require() scss files for components. In https://github.com/mekanix/onelove-frontend/blob/feature/storybook/src/components/layout/header.scss I import screen.scss which is global for the project into every component. This sounds like a bad idea, but works for now. Is there a best practice for inclusion of AleutCSS in React components in such a way?

[mhauken]

I know some of our colleagues are using it like this:

require('./_objects.buttons.scss')
class Button extends Component {
}

This way they are importing the SCSS for each component where it is needed. You need to set up support for this in webpack to make it work. What is nice with this approach is that the generated CSS just magically appears when it's needed and then disappear when it's no longer needed.

They are using the package sass-resources to preload settings-files in the webpack config.

[mekanix]

Thank you very much, it's helpful. With the method you described, how do you go around trumps? I mean, component's scss file should be included before that, if I got it right.

[mhauken]

The rest of the CSS (settings, base etc.) are in its own CSS-file. Including trumps. This won't be 100% ITCSS-structure, but it shouldn't matter if all the trumps have !important on each CSS-value.

[mekanix]

I've finally have everything in one place. For future reference, https://github.com/one-love/frontend/tree/master/stories and https://github.com/one-love/frontend/tree/master/.storybook is how the end results looks like (scss files are rubbish, but the stack is in place). Thank you for your help, it's much appreciated.