¿Cómo incluyo el archivo "css" en "tsx" y cómo usarlo? es decir, ¿cómo renderizo archivos estáticos?

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>
        );
    }
}
9
Ankit Raonka 13 ene. 2017 a las 08:57

3 respuestas

La mejor respuesta

No puede importar directamente CSS ni ningún otro archivo estático en mecanografiado utilizando solo el compilador de mecanografiado, pero puede hacerlo con la ayuda de algunas herramientas de compilación ...

Por ejemplo, usando webpack, puede configurar el cargador css y el cargador de estilos para buscar su fuente código para require('./whatever.css') y agréguelo a la compilación antes de compilar de forma segura su mecanografiado. Si también tiene un paquete web que genera su HTML, su CSS se inyectará automáticamente como una hoja de estilo.

4
alechill 13 ene. 2017 a las 10:13

Hoy me he topado con esta pregunta y descubrí que TS ahora puede importar CSS directamente con webpack y awesome-typescript-loader exactamente así:

import "./home.css";

Pero si desea que quiera usar módulos CSS, deberá agregar algunos pasos más:

  1. npm install --save-dev typings-for-css-modules-loader
  2. Cambie su css-loader a typings-for-css-modules-loader
  3. Cambie la configuración de su paquete web a algo así:

`` `

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' }
    ]
}

Esto generará tipings para archivos CSS y podrá utilizarlos como

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

Aquí está el artículo que utilicé para mi configuración: https: // medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

6
xumix 22 nov. 2017 a las 09:59

Vea esta respuesta:

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

Si solo necesita css para una clase en su componente, puede hacerlo como a continuación. Me gusta esta solución para cuando css en línea no funciona y solo se necesitan pequeños cambios.

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>  
        );
    }
}
3
Community 23 may. 2017 a las 10:31