Using Grommet with Webpack 2 — Create React App

I have spent too much time searching for a way to add Grommet to a new app which I created using Create React App tool with Webpack 2.
I created this post in order to help anyone who’s having a hard time adding Grommet in Webpack 2.

Disclaimer: I’m not an expert in Webpack nor React, My goal is to provide a solution for anyone who’s stuck when starting with Grommet.

The solution in 10 steps:

Install required dependencies:

1. install Grommet

yarn add grommet
yarn add  —dev grommet-css
yarn add —dev node-sass sass-loader

2. In Webpack config [yarn eject if you haven’t already]:

Add scss loader:

{
 test: /\.scss$/,
 use: [
 { loader: 'file-loader', options: { name: '[name].css' } },
 { loader: 'sass-loader',
 options: {
 outputStyle: 'compressed',
 includePaths: [
 './node_modules'
 ] }}]
}

3. Add .scss to extensions array in resolve:

extensions: [‘.js’, ‘.json’, ‘.jsx’,’.scss’],

4. Add scss to exclude array:

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.css$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
 /\.scss$/,
 ],

5. Install extract-text-webpack-plugin and require it in webpack config:

yarn add -dev extract-text-webpack-plugin

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

6. add the next line to the plugins array in module:

plugins: [
// some plugins here 
new ExtractTextPlugin(“styles.scss”),
//more plugins
]

7. Import Grommet:

import Grommet from ‘grommet/components/Grommet’;

8. Wrap your main app component with Grommet tag.

For example:

class App extends Component {
 render() {
 return (
 <Grommet>
 <div>
Hello world
</div>
</Grommet>

9. import grommet css in src/index.js file:

import ‘../node_modules/grommet-css’

10. import grommet scss file in src/index.js :

import ‘../node_modules/grommet/scss/vanilla/index.scss’;

That’s all.

I hope this post helped somebody,

Please let me know if you have any question.

Good Luck!