title: Using global css files with CSS Modules
body: <p>I'm using <a href="https://github.com/mxstbr/react-boilerplate" rel="nofollow">https://github.com/mxstbr/react-boilerplate</a> for a project, which uses CSS Modules and postCSS for the styles, which is great. However, I also need to have some global CSS files for typography, base components, etc. What is the best practice for how these should be added in? I've looked at using <a href="https://github.com/jonathantneal/precss" rel="nofollow">preCSS</a> but not entirely sure how to set it up within webpack, so that it can import these global files into the main stylesheet. I'm new to webpack (come from a Gulp/Grunt background, using Sass) so any help here would be much appreciated.</p>
  
  <p>It would also be great if I could use the variables and mixins defined in these files in the CSS Module files, but unsure if this is possible or advised. I've installed <a href="https://github.com/gajus/react-css-modules" rel="nofollow">react-css-modules</a> so that I can use <code>styleName</code> to refer to the CSS Module file and <code>className</code> to refer to the global CSS classes.</p>
  
  <p>I know there is the <code>composes: class from '/path/to/file.css';</code> attribute but I would prefer to have some global files where various utility classes are defined, such as <code>clearfix</code> and error classes, etc. So using <code>react-css-modules</code>, it would look something like this:
  <code>&lt;div className="clearfix" styleName="app-header"&gt;{...}&lt;/div&gt;</code></p>
  
  <p>Again, not sure if this is correct.</p>
  
  <p>I want to stick to best practices as I'm working on an open-source project and want it to be done in the best way possible. Thanks for any advice!</p>