如何在.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

您不能仅使用打字稿编译器将 CSS 或任何其他静态文件直接导入打字稿，但您可以借助一些构建工具...

例如使用webpack，您可以设置 css-loader 和 style-loader 来搜索您的源代码require('./whatever.css')并将其添加到构建中，然后再安全地编译您的打字稿。如果您还让 webpack 生成您的 HTML，那么您的 CSS 将作为样式表自动注入。

Answer 2

看到这个答案：

/sf/answers/2600128331/

如果您的组件中的某个类只需要 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>  
        );
    }
}

Answer 3

我今天也偶然发现了这个问题，发现TS现在可以直接导入css，webpack并且awesome-typescript-loader完全像这样：

import "./home.css";

但是，如果您喜欢我要使用CSS模块，则必须添加更多步骤：

1. npm install --save-dev typings-for-css-modules-loader
2. 更改css-loader为typings-for-css-modules-loader
3. 将您的webpack配置更改为如下所示：

```

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