title: Why CSS loader of webpack not working?
body: <p>I am making the toy example described in the documentation of css-loader:
  <a href="https://github.com/webpack-contrib/css-loader" rel="nofollow noreferrer">https://github.com/webpack-contrib/css-loader</a></p>
  
  <p>I also tried this basic guide that suggest the same: <a href="https://css-tricks.com/css-modules-part-2-getting-started/" rel="nofollow noreferrer">https://css-tricks.com/css-modules-part-2-getting-started/</a></p>
  
  <p>However, both VS Code highlight and when bundling through the command line complain that the module of the CSS file is not available. Like it does not really recognize it. I have checked I indeed really have installed css-loader, webpack etc. Other than the css loader, webpack is working fine for javascript, typescript etc. So it is really just a problem with CSS. Any ideas why failing?</p>
  
  <p>The error I get is:</p>
  
  <blockquote>
  <pre><code>  TS2307: Cannot find module 'styles.css'.
  </code></pre>
  </blockquote>
  
  <p>My file: </p>
  
  <pre><code>import test from 'styles.css';
  </code></pre>
  
  <p>I tried also without file extension, with and without curly braces etc. But really followed the toy example in the docu of css-loader.</p>
  
  <p>My webpack.config file:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  const config = {
    entry: "./src/index.tsx",
    resolve: {
      extensions: ['.tsx', '.js', '.css']
    },
    output: {
      filename: "bundle.js",
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'title Cool!',
      }),
    ],
    module: {
      rules: [
        {
          test: /.tsx$/, 
          loader: "ts-loader" ,
        },
        {
          test: /.css$/,
          use: [ 'style-loader', 'css-loader' ],
        }
      ]
    }
  }
  
  module.exports = config;
  </code></pre>
  
  <p>Any ideas?</p>