Using Grommet with ReactJS webpack and scss import Issue

Question

I am trying to use grommet in my React Project and i am using webpack. I have added the scss loader and when i build my app i am getting the following error:

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

Not sure what i am doing wrong..

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()
    ]
}

score 5 · Answer 1 · edited Jan 27 '17 at 21:17

5

Update if u use npm3+ you can simply do this(see alan's explanation here):

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

or write scss loader like this:

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

edited Jan 27 '17 at 21:17

ThomasThiebaud

11,331
6
54
77

answered Jul 14 '16 at 14:54

HaveF

2,995
2
26
36

"It's no longer allowed to omit the '-loader' suffix when using loaders" in webpack2 – Flint Jun 06 '17 at 19:54

score 2 · Answer 2 · answered Jul 14 '16 at 14:34

I had the same issue, and got this working by this way:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    // ...
    module: {
        loaders: [
            // ...
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    sassLoader: {
      includePaths: [ './node_modules' ]
    },
    plugins: [
        new ExtractTextPlugin('public/grommet.css', {
            allChunks: true
        })
    ]
}

But remember to import the generated css file into your index.html

score 2 · Answer 3 · answered Mar 17 '17 at 13:29

I fixed it by following Webpack 2 conventions.

{
  test: /(\.scss$)/,
  loaders: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }, {
    loader: 'sass-loader',
    options: {
      outputStyle: 'compressed',
      includePaths: ['./node_modules']
    }
  }]
}

Working quite well on my side!

score 0 · Answer 4 · answered Jul 14 '16 at 18:33

Use the following scss loader in webpack config (thanks to https://github.com/primozs )

{
                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'))
                )
            }

Using Grommet with ReactJS webpack and scss import Issue

4 Answers4