title: ReactJS - including other scss files in main.scss
body: <p>In my reactJS application - I am including all .scss files in one main.scss file - under styles folder in src folder. I have the following webpack configuration. tried including main.scss file directly in my main component - getting error at '@import' where I import other scss files. if i include separate scss file styles are fine - but how to get this working with one main.scss file and how to include it?</p>
  
  <p>error: Unexpected token, expected ( (1:8)</p>
  
  <blockquote>
    <p>1 | @import 'mycomponent';</p>
  </blockquote>
  
  <pre><code>module.exports = {
    entry: [
      'webpack-hot-middleware/client',
      path.resolve(__dirname, 'src'),
    ],
    output: {
      path: path.resolve(__dirname, 'src'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new ExtractTextPlugin('bundle.css', { allChunks: true }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
          WEBPACK: true,
        },
      }),
    ],
    module: {
  
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            query: {
              presets: ['react-hmre'],
            },
          },
          include: path.resolve(__dirname, 'src'),
        },
       {
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
           'css-loader', 
           'sass-loader?outputStyle=expanded'.
        ]
      }),
      test: /\.scss$/,
      exclude: /node_modules/
    }
      ],
    },
  };
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { createBrowserHistory } from 'history';
  import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import App from './components/homepage';
  import reducers from './reducers';
  import '../styles/main.scss';
  
  
  const history = createBrowserHistory();
  const store = createStore(reducers, applyMiddleware(routerMiddleware(history)));
  
  render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;App /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
    , document.getElementById('app'));
  
  if (process.env.NODE_ENV === 'development' &amp;&amp; module.hot) {
    module.hot.accept();
    module.hot.accept('./reducers', () =&gt; {
      const nextRootReducer = require('./reducers').default; // eslint-disable-line global-require
      store.replaceReducer(nextRootReducer(store.asyncReducers));
    });
  }
  </code></pre>