title: Compiling SASS files in React component folders
body: <p>I want to use sass stylesheets that are organized with each of my react components, like this:</p>
  
  <pre><code>  components/
    |- componentOne
       |- componentOne.js 
       |- componentOne.scss
    |- componentTwo
       |- componentTwo.js 
       |- componentTwo.scss
    |- componentThree
       |- componentThree.js 
       |- componentThree.scss
  </code></pre>
  
  <p>Are there any webpack settings / tools that will automatically load and compile all .scss files in a certain directory?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>So the below is the current webpack config that I am using (written from a previous developer). I added in the line line in entries of <code>SRC_DIR + "/app/components/",</code> so that extract-text-webpack-plugin will pick up all of the .scss files in the components directory. But when I try to run the build I get the following error message. What am I doing wrong? Thanks.</p>
  
  <pre><code>ERROR in multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css
  Module not found: Error: Can't resolve '/Users/user123/dev/project/src/app/components/' in '/Users/user123/dev/project'
   @ multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css
  </code></pre>
  
  <p>Webpack config:</p>
  
  <pre><code>const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const DIST_DIR = path.resolve(__dirname, "dist");
  const SRC_DIR = path.resolve(__dirname, "src");
  
  const config = {
    entry: [
      "babel-polyfill",
      SRC_DIR + "/app/index.js",
      SRC_DIR + "/app/assets/stylesheets/application.scss",
      SRC_DIR + "/app/components/",
      "font-awesome/scss/font-awesome.scss",
      "react-datepicker/dist/react-datepicker.css",
      "rc-time-picker/assets/index.css",
      "react-circular-progressbar/dist/styles.css",
      "@trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
    ],
    output: {
      path: DIST_DIR + "/app/",
      filename: "bundle.js",
      publicPath: "/app/"
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      historyApiFallback: true,
      hot: true,
      proxy: {
      '/api': {
          target: 'http://localhost:5001',
          secure: false,
      },
  }
    },
    module: {
      rules: [
        {
          enforce: "pre",
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "eslint-loader",
          options: {
            failOnWarning: false,
            failOnError: true
          }
        },
        {
          test: /\.js$/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'stage-2']
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            use: 'css-loader?importLoaders=1',
          })
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          loaders: ['file-loader?context=src/images&amp;name=images/[path][name].[ext]', {
            loader: 'image-webpack-loader',
            query: {
              mozjpeg: {
                progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: '75-90',
                speed: 3,
              },
            },
          }],
          exclude: path.resolve(__dirname, "node_modules"),
          include: __dirname,
        },
        {
          test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          // loader: "url?limit=10000"
          use: "url-loader"
        },
        {
          test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
          use: 'file-loader'
        },
      ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: "application.css",
        allChunks: true
      })
    ]
  };
  
  module.exports = config;
  </code></pre>