Cannot import CSS module in .tsx file

Question

I am building basic react application with typescript but I am not able to import CSS file in index.tsx file

I am able to import index.css file following way:

import './index.css'; 
//this import gives typescript error when running webpack 

but not able to import as

import * as Styles from './index.css';

this is my webpack.config.js file

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin')
var config = {
    mode:"none",
    entry:"./src/index.tsx",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename: "bundle.js"
    },
    resolve:{
        extensions:[".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/\.tsx?$/, loader:"awesome-typescript-loader"},
            { test: /\.css$/, include: path.join(__dirname, 'src/'),
             loader:"typings-for-css-modules-loader" }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './index.html'
    })]
};

module.exports = config;

I tried following links before posting but no luck

How to include .css file in .tsx typescript?

How to import css file for into Component .jsx file

https://github.com/parcel-bundler/parcel/issues/616

Thanks in advance

Solution

With the new version of React, to use CSS module you don't need to config anything in Webpack or reject your project. All your need to do is:

1. Install css-modules-loader: https://github.com/gajus/react-css-modules
2. Change the file name styles.css to styles.module.css

3. Import the css file to your component:

   import styles from './styles.module.css'

4. Use className in component:

   <div className={styles.app}> Hello World </div>

Demo project: https://codesandbox.io/s/kwyr5p378o

Comments

[AviatorX]

I edited code snippets ..sorry for wrong code

[Ravi Sevta]

In my case, it's working fine, but giving tslint error 'Can not find module ./index.css '. I tried from https://github.com/zeit/styled-jsx

[AviatorX]

tslint search for files with extension .ts so might be in your case tslint is not able find index.css.ts file and because of this it's throwing error 'module not found'

[Ravi Sevta]

my CSS file is with a .css extension not with .css.ts. like: index.css

[AviatorX]

TypeScript does not know that there are files other than .ts or .tsx so it will throw an error if an import has an unknown file suffix. If you have a webpack config that allows you to import other types of files, you have to tell the TypeScript compiler that these files exist

[AviatorX]

I tried above method but I am getting following error You may need an appropriate loader to handle this file type. > .foo { | color: chocolate; | } @ ./src/components/index.tsx 6:15-45 after this I tried with css-loader and code is present in final bundle.js file but style is not getting applied to components

[AviatorX]

this method is working when I explicitly link CSS file in html

[AviatorX]

I am not using create-react-app template . I am building from scratch with no initial configuration