Cannot import CSS module in .tsx file

AviatorX picture AviatorX · Dec 28, 2018 · Viewed 8.2k times · Source

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

Answer

Tony Bui picture Tony Bui · Dec 29, 2018

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