Wie wird die CSS-Datei in das .tsx-Typoskript eingefügt?

Wie schließe ich "css" Datei in "tsx" und wie man es benutzt? d. Wie rende ich statische Dateien?Wie wird die CSS-Datei in das .tsx-Typoskript eingefügt?

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> 
     ); 
    } 
}

Quelle

2017-01-13 Ankit Raonka

Was möchten Sie mit der CSS-Datei machen? im Allgemeinen sollte es verfügbar sein, wenn Sie es zuvor in HTML – rala

es funktioniert, wenn ich CSS-Skripte in index.html bt ich möchte es in Jsx in tsx-Datei –

Sie nicht direkt CSS oder andere statische Dateien in Typoskript nur das Typoskript Compiler importieren können, aber Sie können mit Hilfe einiger Build-Tools ...

Zum Beispiel webpack verwenden, können Sie festlegen up den css-loader und style-loader, um den Quellcode nach require('./whatever.css') zu suchen und ihn dem Build hinzuzufügen, bevor Sie Ihr Typoskript sicher kompilieren. Wenn Sie mit webpack auch HTML generieren, wird Ihr CSS automatisch als Stylesheet eingefügt.

Quelle

2017-01-13 10:13:55 alechill

verwenden, aber 'require' funktioniert nicht in tsx, importieren './whatevery.css' funktioniert, auch, wie Sie tun, was Sie in der letzten Zeile –

'import' erwähnt haben, sollte funktionieren, solange Sie es nichts zuweisen möchten. Wenn Sie das tun (dh wenn Sie CSS-Module verwenden), fügen Sie für die Signatur von 'require', um keine Typoskript-Warnungen zu geben, die' @ types/node'-Definitionen zu Ihrem Projekt hinzu. Ohne Ihre Build-Konfiguration ist es schwer, genaue Anweisungen zu geben, um Ihr Ziel zu erreichen - es gibt viele Ressourcen zur Verfügung, um Webpack einrichten zu helfen, wenn Sie nicht schon haben. Die Loader, die Sie benötigen, sind [css-loader] (https://github.com/webpack/css-loader) und [typescript-loader] (https://github.com/TypeStrong/ts-loader) – alechill

hey danke, ich habe css-loader und file-loader (für Bilder) hinzugefügt, es funktioniert, aber wie js Skripte zu HTML automatisch zu bedienen –

Siehe diese Antwort:

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

Wenn Sie nur CSS für eine Klasse in Ihrer Komponente müssen Sie es wie unten tun könnte. Ich mag diese Lösung, wenn Inline-CSS nicht funktioniert und nur kleine Änderungen benötigt werden.

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> 
     ); 
    } 
}

Quelle

2017-05-18 14:13:14 Ogglas

Wenn Sie downvote bitte sag warum. – Ogglas

Siehe meine Antwort oben – xumix

@xumix Ich verstehe Ihren Downvote nicht. Ihre Lösung benötigt Webpack und beantwortet eine Frage zu Typings - worum es in der Frage nicht geht. Ich stelle einen Link zu einer Lösung mit Webpack bereit und gebe ein Beispiel, ohne eine separate CSS-Datei verwenden zu müssen. – Ogglas

Ich habe über diese Frage gestolpert heute auch und fand, dass TS können nun CSS direkt mit webpack und awesome-typescript-loader genau so importieren:

import "./home.css";

Aber wenn Sie mich CSS Module verwenden möchten , als Sie einige weitere Schritte müssen hinzufügen:

npm install --save-dev typings-for-css-modules-loader
Ändern Sie Ihre css-loader zu typings-for-css-modules-loader
Ändern Sie Ihre webpack Config wie folgt smth:

`` `

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

Diese Typisierungen für CSS-Dateien generieren und Sie werden in der Lage, sie wie

zu verwenden Hier

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

ist der Artikel, den ich für meine config: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

Quelle

2017-11-22 09:59:40 xumix

Wie wird die CSS-Datei in das .tsx-Typoskript eingefügt?

Antwort

Verwandte Themen