[英]How to include .css file in .tsx typescript?
How do i include "css" file in "tsx" and how to use it? 我如何在“tsx”中包含“css”文件以及如何使用它? ie how do i render static files?
即如何渲染静态文件?
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>
);
}
}
I've stumbled upon this question today also and found that TS now can import css directly with webpack
and awesome-typescript-loader
exactly like this: 我今天偶然发现了这个问题,发现TS现在可以直接用
webpack
和awesome-typescript-loader
webpack
awesome-typescript-loader
导入css,如下所示:
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
css-loader
to typings-for-css-modules-loader
css-loader
更改为typings-for-css-modules-loader
``` ```
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
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... 您不能仅使用typescript编译器将CSS或任何其他静态文件直接导入typescript,但您可以借助一些构建工具...
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. 例如,使用webpack ,您可以设置css-loader和style-loader来搜索
require('./whatever.css')
源代码,并在安全编译打字稿之前将其添加到构建中。 If you also have webpack generate your HTML then your CSS will be automatically injected as a stylesheet. 如果您还有webpack生成HTML,那么您的CSS将自动注入样式表。
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. 如果您只需要组件中的类的css,您可以像下面这样做。 I like this solution for when inline css does not work and only small changes are needed.
我喜欢这种解决方案,因为当内联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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.