title: How to load a main .scss file into Webpack 3.6~ and React
body: <p>I have spent the last couple hours trying to get an existing group of <code>SCSS</code> files to work in a React project, but I can't seem to get it to use them.</p>
  <p>I was previously running a fairly minimalist Webpack config with CDN supplied styles, so I haven't had to go full custom yet.</p>
  <ol>
  <li>My main problem is the CSS is not working.</li>
  <li>This project is currently compiling without issue.</li>
  </ol>
  <p>Here are my current files:</p>
  <p><strong>./webpack.config.js</strong></p>
  <pre><code>const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = {
    entry: ['./src/index.js'],
    output: {
      path: __dirname,
      publicPath: '/',
      filename: 'bundle.js'
    },
    devtool: 'inline-source-map',
    module: {
      loaders: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: { presets: ['react', 'es2015', 'stage-1'] }
        },
        {
          test: /\.(png|jpg)$/,
          loader: 'url-loader?limit=8192'
        },
        // {
        //     test: /\.css$/,
        //     use: ['style-loader', 'css-loader']
        // },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              'css-loader',
              'postcss-loader',
              'sass-loader'
            ]
          })
        }
      ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name]-[chunkhash].css',
            disable: false,
            allChunks: true
        }),
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    },
    devServer: {
      hot: false,
      historyApiFallback: true,
      contentBase: './',
      port: 80
    }
  };
  </code></pre>
  <p><strong>./postcss.config.js</strong></p>
  <p>This is just experimental garbage. I will come back to it later.</p>
  <pre><code>module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }
  </code></pre>
  <p><strong>./index.html</strong></p>
  <p>I don't have anything to do with CSS or SCSS in my root html file, which may be part of the issue. I don't know what to do though if so.</p>
  <p><strong>./src/index.js</strong></p>
  <pre><code>// ... ✂ ...
  
  const Root = () =&gt; (
    &lt;ApolloProvider store={store} client={client}&gt;
      &lt;Router history={history}&gt;
        &lt;Route path=&quot;/&quot; component={App} /&gt;
      &lt;/Router&gt;
    &lt;/ApolloProvider&gt;
  )
  
  ReactDOM.render(
    &lt;Root /&gt;,
    document.querySelector('#root')
  )
  </code></pre>
  <p><strong>./src/components/App.js</strong></p>
  <pre><code>export default ({ match: { url } }) =&gt; {
    return (
      &lt;div id=&quot;container&quot;&gt;
        &lt;Header /&gt;
        &lt;Switch&gt;
          &lt;Route path={`${url}login`} component={LoginForm} /&gt;
          &lt;Route path={`${url}logout`} component={LogOut} /&gt;
          &lt;Route path={`${url}signup`} component={SignUp} /&gt;
          &lt;Route path={`${url}dashboard`} component={requireAuth(Dashboard)} /&gt;
          &lt;Route path={`${url}profile/edit`} component={requireAuth(ProfileEdit)} /&gt;
          &lt;Route path={`${url}profile`} component={requireAuth(Profile)} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>./src/components/auth/LoginForm.js</strong></p>
  <pre><code>// ... ✂ ...
  
  import '../../../styles/app.scss'
  
  class LoginForm extends Component {
    render() {
      return (
        &lt;div className=&quot;row&quot;&gt;
          &lt;div className=&quot;full-row&quot;&gt;what&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default LoginForm
  </code></pre>
  <p>This above file is where I am manifesting the problem. You can see it has <code>className=&quot;row&quot;</code> and <code>className=&quot;full-row&quot;</code> being used in it, and I am importing <code>'../../../styles/app.scss'</code> which has that CSS in it:</p>
  <pre><code>.full-row {
    @include flex(column);
    align-items: center;
    width: 100%;
    height: 57.6rem;
    background: yellow;
  }
  
  .row {
    @include flex(column);
    align-items: center;
    min-width: 102.4rem;
    background-color: pink;
  }
  </code></pre>
  <p>All I want is to see that yellow and pink so I know the SCSS is hooked up.</p>
  <blockquote>
  <p>Is my webpack.config.js file screwed up?</p>
  <p>Is the way I am trying to import SCSS in LoginForm.js incorrect?</p>
  <p>Does my index.html file need anything to make this work?</p>
  <p>I have not compiled any SCSS. I am trying to rely on Webpack to help me there.</p>
  </blockquote>
  <p>I need some pointers based on what I have so far.</p>