React-boilerplate+grommet, making sass work with webpack

Question

I have more than 10 years of exp in Python and Flask with primary focus on backend and very little HTML + JavaScript however zero CSS. I started on React and JavaScript about 6 weeks ago and made simple apps using react which did not required much styling. However, now I need to do a decent size project with React using grommet for styling.

I started with react-boilerplate1. After reading react-boilerplate scss docs and //github.com/grommet/grommet-standalone Readme, my understanding is that, I need to make webpack config changes to get scss loader working.

My env is win8.1 x64, node 6.4.0

Here is what I changed.

1. installed both sass-loader & node-sass

2. in internals\webpack\webpack.dev.babel.js changed

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',

to

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader!sass-loader',

Notice the additional !sass-loader as per //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

3. Added the following to internals\webpack\webpack.base.babel.js

{ test: /\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ line 40 just below the css block, and

sassLoader: {
  includePaths: [
    './node_modules',
    // this is required only for NPM < 3.
    // Dependencies are flat in NPM 3+ so pointing to
    // the internal grommet/node_modules folder is not needed
    './node_modules/grommet/node_modules'
  ]
}

@line 62[ line no 58 if you are looking @ github source in master branch //github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js, +4 is because of added 4 lines for scss block ]

4. in the same file added '.scss' in resolve.extenstions array.

5. Now after these changes i run npm start and add the following line to app\containers\App\index.jsNow after these changes i run npm start and add the following line to app\containers\App\index.js

   import 'grommet/scss/vanilla/index';

as per documentation here //github.com/grommet/grommet-standalone

in cmd.exe console I get the following error

ERROR in ./app/containers/App/index.js
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in 'C:\Users\coder\frontend\app\containers\App'
 @ ./app/containers/App/index.js 57:0-36
 @ ./app/app.js
 @ multi main
Child html-webpack-plugin for "index.html":

Needless to say grommet is installed and file is present at the resired location with scss extesion. I can ofcourse import with extension as import 'grommet/scss/vanilla/index.scss then I get the following error

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/sass-loader?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss Module build failed: Unknown word (5:1)

  3 | // load the styles   4 | var content = require("!!./../../../css-loader/index.js!./../../../sass-loader/index.js?outputStyle=compressed!./index.scss");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^   6 | // add the styles to the DOM   7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});   8 | if(content.locals) module.exports = content.locals;

 @ ./~/grommet/scss/vanilla/index.scss 4:14-189 13:2-17:4 14:20-195

Is there something very obvious I am missing here? It looks like as if scss loader is not working. If you have successfully used grommet with react-boilerplate, please post the changes you made.

PS: Stack Overflow informs me that I cannot post more than two links, so I modified the links to omit https: from the urls, please add those manually.

Answer 1

To run the grommet inbuilt stylings (themes) you will not need to install the sass-loader or node-sass until you want to customize its styling using scss.

As you have installed grommet package it contains the minified css for supported themes inside of the node module itself which you can directly use to import in your application.

To resolve your issue you can just add below import to you index.js file which will give you a default grommet stylings

import 'grommet/grommet.min.css';

It is a minified css file so you will not need to process the scss files from the grommet. This will work as a simple css file.

In addition to this you can also choose different available themes from grommet. Minified css are also available for this thems. Here is the list of those css:

1. grommet.min.css
2. grommet-hpinc.min.css
3. grommet-hpe.min.css
4. grommet-aruba.min.css

Answer 2

In your "webpack.config.json" file add the following this is extracted from the grommet doc for Standalone installation, mine is as follows:

// Development rules
rules.push(
{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader', options: {
        sourceMap:true,
        includePaths: ['./node_modules', './node_modules/grommet/node_modules']
      }
    }        
  ],
}
);

Following
Go to your main sass file. Mine is called "app.scss" and is located inside the main "scss" Folder inside I have the following code:

@import '~grommet/scss/aruba/index'; // or @import '~grommet/scss/vanilla/index'; any grommet theme
@import "base/normalize";
@import "base/breakpoints";
@import "base/app";

Now grommet sass should be available for the whole project, note that here you may Change Grommet Theme of your preference.