SCSS files/syntax not working about react-webpack-babel HOT 9 CLOSED

I would probably start looking the loader config and the sass-loader doc

from react-webpack-babel.

relevant: webpack-contrib/sass-loader#187

from react-webpack-babel.

@LeonardoGentile thanks for your pointers!

I tried removing this option from the loader

indentedSyntax: "sass"

and I imported the loader like this

loader: "sass-loader?indentedSyntax=false"

and always got the same errors.

I removed all .sass files and only created and imported .scss files and I'm getting same errors yet

[Edited: was getting other errors because of a misconfiguration error I did]

Call me crazy, but shouldn't SCSS files just work out of the box with the provided configs?

from react-webpack-babel.

I have this in my config in my working environment today:

DEVELOPMENT

config.module.rules.push({
  test: /\.(css|scss)$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        sourceMap: 1
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true
      }
    }
  ]
});

PRODUCTION

config.module.rules.push({
  test: /\.(scss|css)$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader'
  ]
});

from react-webpack-babel.

@alicoding Thanks!! this config works for me.

Still, I think this is an issue since the project claims to support sass and scss files. I'm not closing the issue right now for this reason.

from react-webpack-babel.

@eoy4 do you mind update the config and make a pull request for that :)

from react-webpack-babel.

@alicoding I removed some things from my config, like css modules. I'll try to identify the change that fixes the SCSS issue and do a PR with it

from react-webpack-babel.

👍

from react-webpack-babel.

This is fixed in the new version.

from react-webpack-babel.