18

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>
        );
    }
}
Ankit Raonka
  • 6,429
  • 10
  • 35
  • 54
  • what do you want to make with the css file? in general it should be available if you included it before in HTML – rala Jan 13 '17 at 06:00
  • it will work if i include css scripts in index.html bt i want to use it in jsx in tsx file – Ankit Raonka Jan 13 '17 at 06:13

3 Answers3

11

See this answer:

https://stackoverflow.com/a/37144690/3850405

If you only need css for a class in your component you could do it like below. I like this solution for when inline css does not work and only small changes are needed.

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

export class Home extends React.Component<{}, {}> {
    render() {
        const css = `
        .landing-page {
            background-color: orange;
        }
        `
        return (
            <div>
                <style>
                    {css}
                </style>
                <div id="page-top" className="landing-page">
                    <Header />
                </div>
            </div>  
        );
    }
}
Community
  • 1
  • 1
Ogglas
  • 62,132
  • 37
  • 328
  • 418
  • See my answer above – xumix Nov 22 '17 at 10:00
  • @xumix I don't understand your downvote. Your solution requires webpack and answers a question about typings - which the question is not about. I'm providing a link to a solution with webpack and giving an example without having to use a separate css-file. – Ogglas Nov 22 '17 at 10:05
  • 1
    The question is 1) about typescript, not js as your provided link 2) your answer is about adding inline styles but not including a css file into a tsx – xumix Nov 22 '17 at 10:07
  • Let's agree to disagree then. 1) .Typescript yes since it is a `.tsx` file but the question is not about typings. 2) I still think my answer is a viable solution that does not require external dependencies. My link also provides an answer to including a .css-file - I do not like to duplicate another answer when it already exist. – Ogglas Nov 22 '17 at 10:13
9

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.

alechill
  • 4,274
  • 18
  • 23
  • 1
    but 'require' doesn't work in tsx , import './whatever.css' works, also how to do what you have mentioned in the last line – Ankit Raonka Jan 13 '17 at 10:57
  • 1
    `import` should work, as long as you don't want to assign it to anything. If you do (ie if using CSS modules) then for the signature of `require` to not give you typescript warnings add the `@types/node` definitions to your project. Without any of your build config it is hard to give precise instructions to achieve your goal - there are plenty of resources available to help get webpack set up if you haven't already. The loaders you need will need are [css-loader](https://github.com/webpack/css-loader), and [typescript-loader](https://github.com/TypeStrong/ts-loader) – alechill Jan 13 '17 at 11:31
  • hey thanx i added css-loader and file-loader(for images), it works, but how to serve js scripts to html automatically – Ankit Raonka Jan 15 '17 at 08:03
  • 1
    Excellent. You can use the [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) to generate your html, which will automatically put any script and css link tags in there. If you have extra stuff currently that you still want to control you can pass it a template file... ` const HtmlWebpackPlugin = require('html-webpack-plugin') /* in the webpack config object */ plugins: [ new HtmlWebpackPlugin({ template: './src/index.template.ejs', inject: 'head' }) ] ` – alechill Jan 15 '17 at 10:45
  • http://stackoverflow.com/questions/42358726/why-i-am-forced-to-write-es2015-while-converting-react-code-to-typescript – Ankit Raonka Feb 21 '17 at 04:33
  • Here is a nice article with a css-loader replacement for typescript https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10 – xumix Nov 22 '17 at 09:49
  • [This answer](https://stackoverflow.com/a/44283813) shows a simple way to copy CSS assets as part of a TypeScript build process. – kas May 26 '20 at 05:13
7

I've stumbled upon this question today also and found that TS now can import css directly with webpack and awesome-typescript-loader exactly like this:

import "./home.css";

But if you like me want to use CSS modules, than you will have to add some more steps:

  1. npm install --save-dev typings-for-css-modules-loader
  2. Change your css-loader to typings-for-css-modules-loader
  3. Change your webpack config to smth like this:

```

module: {
    rules: [
        { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
        { test: /\.css$/, use: isDevBuild ? ['style-loader', "typings-for-css-modules-loader?namedExport&modules"] : ExtractTextPlugin.extract({ use: 'typings-for-css-modules-loader?minimize&namedExport&modules' }) },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=1000' }
    ]
}

This will generate typings for css files and you will be able to use them like

import * as style from './home.css';

Here is the article I used for my config: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

xumix
  • 593
  • 7
  • 17