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

Posted 2023-02-22

【中文标题】如何在 .tsx 打字稿中包含 .css 文件？

【英文标题】：How to include .css file in .tsx typescript?

【发布时间】：2017-05-28 10:47:48

【问题描述】：

如何在“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>
        );
    

【问题讨论】：

你想用css文件做什么？一般来说，如果您之前在 html 中包含它，它应该是可用的

如果我在 index.html bt 中包含 css 脚本我想在 tsx 文件中的 jsx 中使用它，它将起作用

【参考方案1】：

看到这个答案：

https://***.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>  
        );
    

【讨论】：

看我上面的回答

@xumix 我不明白你的反对意见。你的解决方案需要 webpack 并回答一个关于类型的问题——这个问题不是关于的。我提供了一个使用 webpack 的解决方案的链接，并给出了一个示例，而无需使用单独的 css 文件。

问题是 1）关于 typescript，而不是 js 作为您提供的链接 2）您的答案是关于添加内联样式但不包括 css 文件到 tsx

让我们同意不同意。 1) .Typescript 是的，因为它是一个.tsx 文件，但问题不在于打字。 2）我仍然认为我的答案是一个不需要外部依赖的可行解决方案。我的链接还提供了包含 .css 文件的答案 - 我不喜欢复制已经存在的另一个答案。

【参考方案2】：

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

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

【讨论】：

但是 'require' 在 tsx 中不起作用， import './whatever.css' 起作用，以及如何做你在最后一行提到的事情

import 应该可以工作，只要您不想将其分配给任何东西。如果你这样做（即如果使用 CSS 模块），那么对于 require 的签名，不要给你打字稿警告，请将 @types/node 定义添加到你的项目中。如果没有任何构建配置，很难给出精确的指令来实现你的目标——如果你还没有的话，有很多资源可以帮助你设置 webpack。您需要的加载程序是css-loader 和typescript-loader

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

优秀。您可以使用html-webpack-plugin 生成您的 html，它会自动将任何脚本和 css 链接标签放入其中。如果您当前有额外的东西仍然想控制，您可以将模板文件传递给它...` const HtmlWebpackPlugin = require('html-webpack-plugin') /* 在 webpack 配置对象中 */ plugins: [ new HtmlWebpackPlugin ( 模板: './src/index.template.ejs', 注入: 'head' ) ] `

***.com/questions/42358726/…

【参考方案3】：

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

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