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

我如何在"tsx"中包含"css"文件以及如何使用它？即如何渲染静态文件？

import * as React from "react";
import { Header } from "./header";

//import "./home.css";


export class Home extends React.Component<{}, {}> {
    render() {
        return (
            

                

            
        );
    }
}

xumix.. 6

我今天也偶然发现了这个问题，发现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

我今天也偶然发现了这个问题，发现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