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
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:
css-modules-loader
: https://github.com/gajus/react-css-modulesstyles.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