如何在.tsx TypeScript文件中引入.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>
        );
    }
}

- Ankit Raonka

---

你想用CSS文件做什么？通常情况下，如果你之前在HTML中引入了它，它应该是可用的。 - rala

如果我在index.html中包含CSS脚本，它会起作用，但我想在jsx和tsx文件中使用它。 - Ankit Raonka

Answer 1

请参考以下答案：

看这个回答：

https://dev59.com/s5bfa4cB1Zd3GeqP0evd#37144690

如果你只需要在组件中使用一个类的 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>  
        );
    }
}

- Ogglas

---

请参见我上面的答案。 - xumix

@xumix，我不明白你的负评是为什么。你的解决方案需要使用webpack，并回答了一个关于类型的问题——而这个问题并不是关于类型的。我提供了一个带有webpack解决方案的链接，并且给出了一个无需使用单独css文件的示例。 - Ogglas

这个问题是关于 TypeScript 的，不是你提供链接中的 JavaScript。 你的答案是关于添加内联样式，而不是将 CSS 文件包含到 tsx 中。 - xumix

让我们就这样同意各自保留不同的看法。 1）因为它是一个.tsx文件，所以Typescript是可以的，但问题不在于类型。 2）我仍然认为我的答案是一种可行的解决方案，不需要外部依赖。我的链接还提供了如何包含.css文件的答案 - 当已经存在另一个答案时，我不喜欢重复回答。 - Ogglas

请看我上面的回答 - xumix 于2017年11月22日10:00发表。现在根据用户投票，它在这里变成了“下面”。 - undefined

Answer 2

你不能直接使用typescript编译器导入CSS或其他静态文件，但是你可以借助一些构建工具...

例如使用webpack，你可以设置css-loader和style-loader来搜索你的源代码中的require('./whatever.css')并在安全编译typescript之前将其添加到构建中。如果你还让webpack生成HTML，则你的CSS将自动注入为样式表。

- alechill

---

但是在tsx中，'require'不起作用，而import './whatever.css'可以使用。另外，您如何实现您在最后一行提到的内容？ - Ankit Raonka

只要您不想将其分配给任何内容，import 就可以正常工作。如果您这样做了（例如使用 CSS 模块），那么为了让 require 的签名不给您带来 TypeScript 警告，请将 @types/node 定义添加到您的项目中。如果没有任何构建配置，很难给出精确的指令以实现您的目标 - 如果您还没有设置 webpack，则有大量资源可用于帮助您进行设置。您需要的加载器是 css-loader 和 typescript-loader。 - alechill

嗨，谢谢。我已经添加了css-loader和file-loader（用于图像），它可以工作了。但是如何自动将js脚本提供给html呢？ - Ankit Raonka

很好。您可以使用html-webpack-plugin来生成HTML，它会自动将任何脚本和CSS链接标签放在里面。如果您目前有额外的内容需要控制，可以传递一个模板文件...` const HtmlWebpackPlugin = require('html-webpack-plugin')/* 在webpack配置对象中 */ plugins: [ new HtmlWebpackPlugin({ template: './src/index.template.ejs', inject: 'head' }) ] ` - alechill

http://stackoverflow.com/questions/42358726/why-i-am-forced-to-write-es2015-while-converting-react-code-to-typescript - Ankit Raonka

Answer 3

今天我也遇到了这个问题，并发现TS现在可以通过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配置更改为以下内容：

```

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

- xumix