typescript 如何在 .tsx 打字稿中包含 .css 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41628247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include .css file in .tsx typescript?
提问by Ankit Raonka
How do i include "css" file in "tsx" and how to use it? i.e how do i render static files?
如何在“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>
);
}
}
采纳答案by alechill
You cannot directly import CSS or any other static files into typescript using only the typescript compiler, but you can with the help of some build tools...
您不能仅使用打字稿编译器将 CSS 或任何其他静态文件直接导入打字稿，但您可以借助一些构建工具...
For example using webpack, you can set up the css-loader and style-loader to search your source code for require('./whatever.css')and add it to the build before safely compiling your typescript. If you also have webpack generate your HTML then your CSS will be automatically injected as a stylesheet.
例如使用webpack，您可以设置 css-loader 和 style-loader 来搜索您的源代码require('./whatever.css')并将其添加到构建中，然后再安全地编译您的打字稿。如果您还让 webpack 生成您的 HTML，那么您的 CSS 将作为样式表自动注入。
回答by xumix
I've stumbled upon this question today also and found that TS now can import css directly with webpackand awesome-typescript-loaderexactly like this:
我已经就这个问题今天也迷迷糊糊地发现，TS现在可以导入CSS直接webpack和awesome-typescript-loader完全一样：
import "./home.css";
But if you like me want to use CSS modules, than you will have to add some more steps:
但是如果你像我一样想使用 CSS 模块，那么你将不得不添加更多的步骤：
npm install --save-dev typings-for-css-modules-loader- Change your
css-loadertotypings-for-css-modules-loader - Change your webpack config to smth like this:
npm install --save-dev typings-for-css-modules-loader- 改变你
css-loader的typings-for-css-modules-loader - 像这样将你的 webpack 配置更改为 smth：
```
``
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' }
]
}
This will generate typings for css files and you will be able to use them like
这将为 css 文件生成类型，您将能够像这样使用它们
import * as style from './home.css';
Here is the article I used for my config: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
这是我用于配置的文章：https: //medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
回答by Ogglas
See this answer:
看到这个答案：
https://stackoverflow.com/a/37144690/3850405
https://stackoverflow.com/a/37144690/3850405
If you only need css for a class in your component you could do it like below. I like this solution for when inline css does not work and only small changes are needed.
如果您的组件中的某个类只需要 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>
);
}
}
