Question

我如何包含＆＃34; css＆＃34;文件＆＃34; tsx＆＃34;以及如何使用它？即如何渲染静态文件？

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现在可以直接导入css，webpack和awesome-typescript-loader就像这样：

import "./home.css";

但如果你喜欢我想使用CSS模块，那么你将不得不再添加一些步骤：

npm install --save-dev typings-for-css-modules-loader
将您的css-loader更改为typings-for-css-modules-loader
将您的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

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

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

3 个答案: