Cannot import CSS module in .tsx file

user_7726291 0
Viewed 13474

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

css-loader webpack typescript reactjs css
2 Answers

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

user_96941740

In typings-for-css-modules-loader docs, it's suggested that you import your css as

either

import styles from './index.css';

or 

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

In your example, you are missing the keyword from

user_108323390
Related