如何在.tsx打字稿中包含.css文件？

Question

我如何在“tsx”中包含“css”文件以及如何使用它？ 即如何渲染靜態文件？

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

Answer 1

我今天偶然發現了這個問題，發現TS現在可以直接用webpack和awesome-typescript-loader webpack awesome-typescript-loader導入css，如下所示：

import "./home.css";

但是，如果你喜歡我想使用CSS模塊，那么你將需要添加更多的步驟：

1. npm install --save-dev typings-for-css-modules-loader
2. 將您的css-loader更改為typings-for-css-modules-loader
3. 將您的webpack配置更改為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' }
    ]
}

這將為css文件生成輸入，你可以像使用它們一樣使用它們

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

這是我用於配置的文章： https ： //medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

Answer 2

您不能僅使用typescript編譯器將CSS或任何其他靜態文件直接導入typescript，但您可以借助一些構建工具...

例如，使用webpack ，您可以設置css-loader和style-loader來搜索require('./whatever.css')源代碼，並在安全編譯打字稿之前將其添加到構建中。 如果您還有webpack生成HTML，那么您的CSS將自動注入樣式表。

Answer 3

看到這個答案：

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

如果您只需要組件中的類的css，您可以像下面這樣做。 我喜歡這種解決方案，因為當內聯css不起作用時，只需要進行小的更改。

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