Search code examples
javascriptcsstypescript

How to include .css file in .tsx typescript?

How do i include "css" file in "tsx" and how to use it? i.e how do i render static files?

import * as React from "react";
import { Header } from "./header";

//import "./home.css";


export class Home extends React.Component<{}, {}> {
    render() {
        return (
            <div id="page-top" className="landing-page">
                <Header />
            </div>
        );
    }
}
Solution

  • You cannot directly import CSS or any other static files into typescript using only the typescript compiler, but you can with the help of some build tools...

    For example using webpack, you can set up the css-loader and style-loader to search your source code for require('./whatever.css') and add it to the build before safely compiling your typescript. If you also have webpack generate your HTML then your CSS will be automatically injected as a stylesheet.