I am currently working on a basic React application with TypeScript, but I am encountering difficulty when trying to import a CSS file into my index.tsx file.
I have successfully imported the index.css file using this method:
import './index.css';
//this import gives a TypeScript error when running webpack
However, I am facing issues when trying to import it as:
import * as Styles from './index.css';
Below is an excerpt from 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;
Despite searching through various resources such as forums and links without any success:
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
I appreciate your help in advance.