Grommet: webpack integration and scss import Issue

[mars76]

Hi,

I am trying to use grommet in my ReactJS App and i am using webpack as my module bundler/builder.

I have added the scss loader and when i build my app i am getting the following error:

Here is my webpack.config.js

`var webpack = require('webpack');
var path = require('path');

module.exports ={
devtool :'cheap-module-eval-source-map',
entry:[
'webpack/hot/only-dev-server',
'./index.jsx'
],
module:{
loaders:[
{
test: /.jsx?$/,
exclude :/node_modules/,
include: __dirname,
loader:'react-hot'
},
{
test: /.jsx?$/,
exclude :/node_modules/,
include: __dirname,
loader:'babel',
query:{
"plugins":["transform-decorators-legacy"],
"presets":["es2015","react"]
}
},
{
test :/.css?$/,
include: __dirname,
loaders :['style','css']
},
{
test: /.less$/,
loader: "style!css!less"
},
{
test: /.json$/,
loader: "json"
},
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
resolve:{
extensions:['','.js','.jsx']
},
output:{
path: __dirname+'/',
publicPath:'/',
filename:'bundle.js'
},
devServer:{
contentBase: './',
hot:true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
,new webpack.NoErrorsPlugin()
]
}`

and the error i am getting is

ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss Module build failed: @import "inuit-defaults/settings.defaults"; ^ File to import not found or unreadable: inuit-defaults/settings.defaults Parent style sheet: /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss in /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1) @ ./scss/index.scss 4:14-116 13:2-17:4 14:20-122

Please let me know if you want me to add more files.

Thanks

[primozs]

I think key is:

 {
        test: /\.scss$/,
        loader: 'style!css!sass?outputStyle=expanded&' +
        'includePaths[]=' +
        (encodeURIComponent(
          path.resolve(process.cwd(), './node_modules')
        )) +
        '&includePaths[]=' +
        (encodeURIComponent(
            path.resolve( process.cwd(),
              './node_modules/grommet/node_modules'))
        )
      },

whole example
https://github.com/primozs/feathers-react-bojler
Cheers

[mars76]

Thanks so much primozs.

This loader setting is working as expected.

[alansouzati]

Thanks @primozs !!