import css file in react typescript

Question

I am importing CSS file in my react typescript project but it's always showing the error [You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (https://i.stack.imgur.com/QdAl6.png)below

Tried below things.

a . Adding below things in settings.json

      "typescript.tsdk": "node_modules/typescript/lib",
      "typescript.enablePromptUseWorkspaceTsdk": true
b. Added below code in typings.d.ts file 
      declare module "*.module.css";
      declare module "*.module.scss";
c. Imported css file like below 
     import './index.css';

Answer 1

You need to add a CSS loader to your Webpack config, as was mentioned in the error.

// webpack.config.js
// ...
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: ['css-loader']
      },
      // ...

Additional resources:

• https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/
• https://masteringjs.io/tutorials/webpack/css-loader