title: Webpack css-loader failing: "You may need an appropriate loader to handle this file type."
body: <p>I'm building a React app that uses TypeScript and Webpack 4. I'm trying to import a CSS file from <code>react-select</code>, and I'm getting the generic error:</p>
  
  <pre><code>ERROR in ./node_modules/react-select/dist/react-select.css
  Module parse failed: Unexpected token (8:0)
  You may need an appropriate loader to handle this file type.
  |  * MIT License: https://github.com/JedWatson/react-select
  | */
  | .Select {
  |   position: relative;
  | }
   @ ./src/App.react.tsx 28:0-45
   @ ./src/Root.react.tsx
   @ ./src/index.tsx
   @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.tsx
  </code></pre>
  
  <p>I had a similar issue with trying to add a loader for <code>.graphql</code> files before punting it... I imagine the issues are related; something with my config must be off that's failing to leverage these extra loaders.</p>
  
  <p>I took the barebones <code>css-loader</code> setup straight from <a href="https://github.com/webpack-contrib/css-loader" rel="nofollow noreferrer">https://github.com/webpack-contrib/css-loader</a>.</p>
  
  <p>The <code>file-loader</code> I have is working perfectly fine.</p>
  
  <p>Here's what I think the relevant snippets of code are:</p>
  
  <p>From <code>webpack.common.ts</code>:</p>
  
  <pre><code>const config: webpack.Configuration = {
    module: {
      rules: [
        ...
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.css'],
    },
    ...
  };
  </code></pre>
  
  <p>From <code>App.react.tsx</code>:</p>
  
  <pre><code>import 'react-select/dist/react-select.css';
  ...
  </code></pre>
  
  <p>But guessing there's something outside of that context that's causing the problem. More context...</p>
  
  <p>webpack.common.ts</p>
  
  <pre><code>import * as HTMLPlugin from 'html-webpack-plugin';
  import * as CleanWebpackPlugin from 'clean-webpack-plugin';
  import * as webpack from 'webpack';
  
  const config: webpack.Configuration = {
    // Root TS file for bundling
    entry: './src/index.tsx',
    module: {
      rules: [
        // Bundle files (e.g. images)
        {
          test: /\.(png|jpg|gif)$/,
          use: ['file-loader'],
        },
        // Transpile &amp; type check with babel/typescript loader
        {
          test: /\.tsx?$/,
          use: [
            {
              // Need babel for React HMR support (otherwise could drop babel and use just typescript)
              loader: 'babel-loader',
              options: {
                babelrc: true,
                plugins: ['react-hot-loader/babel'],
              },
            },
            'ts-loader',
          ],
        },
        // Handle .css files
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    // Enable served source maps
    devtool: 'inline-source-map',
    resolve: {
      // Include all these extensions in processing (note we need .js because not all node_modules are .ts)
      extensions: ['.ts', '.tsx', '.js', '.css'],
    },
    // Webpack Dev Server for running locally
    devServer: {
      // Play nicely with react-router
      historyApiFallback: true,
      port: 3000,
      // Enable hot module reloading (HMR)
      hot: true,
    },
    plugins: [
      // Cleans the build folder per-build/reload
      new CleanWebpackPlugin(['dist']),
      // Builds the .html file for entering into bundle
      new HTMLPlugin({
        template: 'INDEX_TEMPLATE.html',
      }),
      // HMR plugins
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      // Prevents webpack watch from going into infinite loop (&amp; stopping on retry) due to TS compilation
      new webpack.WatchIgnorePlugin([
        /\.js$/,
        /\.d\.ts$/,
      ]),
    ],
  };
  
  export default config;
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      // Required option for react-hot-loader
      "target": "es6",
      // Required option for react-hot-loader
      "module": "commonjs",
      "strict": true,
      "jsx": "react",
      // Absolute imports start from here
      "baseUrl": ".",
      "sourceMap": true
    }
  }
  </code></pre>
  
  <p>Please let me know if there's anything else worth noting that could be part of the problem... Thanks!</p>