Refactor CSS/SASS/LESS imports

[leebenson]

There are currently differences in the way CSS, LESS and SASS @import statements resolve, causing unexpected behaviour when using ~ to represent node_modules, and relative path names that don't follow the expected Webpack setting.

Needs proper testing.

[bartekus]

Nice work on the refactor @leebenson, I've tested this by successfully integrating Grommet on #18
Adding @import '~grommet/scss/vanilla/index'; to the styles.scss works exactly as expected!
Thank you!

[Extra-lightwill]

Have you had time to make any progress re: leebenson/reactql#30 ?

If so, what would be the recommended way to import sass partials?

[leebenson]

@Extra-lightwill - sure have, please see #13

TL;DR - Put 'global' @import statements inside a style.global.css file and import that instead. It turns out that :global should only be used for 'inline' statements. See this comment for a more thorough explanation.

[leebenson]

@Extra-lightwill - as for a recommend way to import SASS partials, this should work just like any other SASS import. e.g.:

// if you're importing locally, from your own source
@import 'src/path/to/partial';

// if you're importing from a `node_modules` npm
@import '~module/path/to/partial'