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

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 — Ravi Sevta
– Ravi Sevta, Commented Jun 27, 2019 at 4:20
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' — AviatorX
– AviatorX, Commented Jun 27, 2019 at 17:57
my CSS file is with a .css extension not with .css.ts. like: index.css — Ravi Sevta
– Ravi Sevta, Commented Jun 28, 2019 at 6:08
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
– AviatorX, Commented Jun 28, 2019 at 11:34

Tony Bui · Accepted Answer · 2018-12-29 00:51:14Z

2

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:

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

import styles from './styles.module.css'
Use className in component:

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

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

answered Dec 29, 2018 at 0:51

Tony Bui

1,3079 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AviatorX Over a year ago

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 Over a year ago

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

AviatorX Over a year ago

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

c_thane · Accepted Answer · 2018-12-28 18:02:01Z

0

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

edited Dec 28, 2018 at 18:02

answered Dec 28, 2018 at 17:53

c_thane

4072 silver badges7 bronze badges

Collectives™ on Stack Overflow

Cannot import CSS module in .tsx file

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related