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, Jun 27 '19 at 04: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, Jun 27 '19 at 17:57
my CSS file is with a `.css` extension not with `.css.ts`. like: index.css — Ravi Sevta, Jun 28 '19 at 06: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, Jun 28 '19 at 11:34

score 2 · Answer 1 · answered Dec 29 '18 at 00:51

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 '18 at 00:51

Tony Bui

1,231
7
18

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 Dec 29 '18 at 07:30
this method is working when I explicitly link CSS file in html – AviatorX Dec 29 '18 at 08:49
2

I am not using create-react-app template . I am building from scratch with no initial configuration – AviatorX Dec 29 '18 at 19:10

c_thane · Answer 2 · 2018-12-28T18:02:01.350

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 '18 at 18:02

answered Dec 28 '18 at 17:53

c_thane

321
1
7

Cannot import CSS module in .tsx file

2 Answers2

Linked